summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSimon <vesspa0330@gmail.com>2025-08-29 00:23:34 -0400
committerSimon <vesspa0330@gmail.com>2025-08-29 00:23:34 -0400
commit7818bcf0ba75a52727f46a6c1e589f6c842d3e72 (patch)
tree3ed1a8ba07954ef752c3a4cf85c24c0b3137fb75
parentbfaaf51795a7acdb88e49ba3b961777ca1bda88d (diff)
fixed some padding stuff, added faster nudges, and new themes
-rw-r--r--startpage.html5242
-rw-r--r--themes/experiment.txt1
-rw-r--r--themes/experiment2.txt1
-rw-r--r--themes/green_moutains1
-rw-r--r--themes/modern_green.txt1
-rw-r--r--themes/modern_night.txt1
-rw-r--r--themes/modern_olive.txt1
-rw-r--r--themes/modern_peach.txt1
-rw-r--r--themes/peaceful_horse.txt1
-rw-r--r--themes/pillars_dark.txt1
10 files changed, 2642 insertions, 2609 deletions
diff --git a/startpage.html b/startpage.html
index 6a9a96d..6cce9d8 100644
--- a/startpage.html
+++ b/startpage.html
@@ -37,7 +37,7 @@
body {
height: 100vh;
- overflow: hidden;
+ margin: 0;
}
@@ -368,7 +368,7 @@
<p>
<u>precise adjustments:</u>
click on a container or settings slider to focus it, then use the arrow keys
- to make minute changes.
+ to make minute changes (hold shift for a speed boost when moving containers).
</p>
<hr />
<p>
@@ -417,7 +417,6 @@
layer's "text options"
</p>
</div>
-
</div>
<div id="containerPage" class="tabContent">
@@ -472,7 +471,7 @@
<div id="ioPage" class="tabContent">
<div style="display: flex; flex-direction: column; margin: 2rem 0; gap: 1rem;align-items:center;">
<p class="menuHeader">import theme file</p>
- <input id="import-input" type="file" accept".txt" style="width: 45%; align-self: center" />
+ <input id="import-input" type="file" accept=".txt" style="width: 45%; align-self: center" />
<button style="width: 100%; height: 3rem;" onclick="importData()" >
set new theme
@@ -552,7 +551,7 @@
<h2 class="menuHeader">audio</h2>
<div class="containerOptionListing">
- <label for=audioLinkInput">paste a direct URL to an audio file:</label>
+ <label for="audioLinkInput">paste a direct URL to an audio file:</label>
<div style="display: flex; flex-direction: column; align-items: end;">
<input id="audioLinkInput" style="width: 80%" placeholder="paste file URL" />
@@ -584,3089 +583,3122 @@
<div class="containerOptionListing">
<label for="edit-toggle-alpha">set "edit mode" toggle opacity (%): </label>
- <input id="edit-toggle-alpha"} type="range" min="0" max="100" />
+ <input id="edit-toggle-alpha" type="range" min="0" max="100" />
</div>
-
-
</div>
+ </div>
</div>
- </body>
- <script>
- // cookie holder for coordinates + size of settings menu
- let settingsMenuData = {};
+ <script>
+ // cookie holder for coordinates + size of settings menu
+ let settingsMenuData = {};
- // cookie holder for edit toggle mode customization
- let editToggleRgba = "rbga(0,0,0,1)";
+ // cookie holder for edit toggle mode customization
+ let editToggleRgba = "rbga(0,0,0,1)";
- // cookie holders for container data
- let containerDataMap = new Map();
- let numberTotalContainers = 0;
- let zIndexMap = new Map();
+ // cookie holders for container data
+ let containerDataMap = new Map();
+ let numberTotalContainers = 0;
+ let zIndexMap = new Map();
- // default values for easy resetting
- let defaultTextContainerSettings = {
- backgroundRgba: "rgba(255,255,255,.9)",
- backgroundAlpha: 100,
- borderWidth: "5",
- borderRadius: "0",
- borderColor: "grey",
- fontName: "",
- fontCode: "",
- sectionColor: "",
- sectionSize: "16",
- sectionItalic: false,
- sectionBold: false,
- linkColor: "",
- linkSize: "16",
- linkDecor: true,
- linkBold: false,
- linkItalic: false,
+ // default values for easy resetting
+ let defaultTextContainerSettings = {
+ backgroundRgba: "rgba(255,255,255,.9)",
+ backgroundAlpha: 100,
+ borderWidth: "5",
+ borderRadius: "0",
+ borderColor: "grey",
+ fontName: "",
+ fontCode: "",
+ sectionColor: "",
+ sectionSize: "16",
+ sectionItalic: false,
+ sectionBold: false,
+ linkColor: "",
+ linkSize: "16",
+ linkDecor: true,
+ linkBold: false,
+ linkItalic: false,
- enableDate: true,
- enableClock: true,
- headerColor: "",
- headerSize: "16",
- headerBold: false,
- headerItalic: false,
+ enableDate: true,
+ enableClock: true,
+ headerColor: "",
+ headerSize: "16",
+ headerBold: false,
+ headerItalic: false,
- enableDivider: true,
- dividerColor: "",
- textAlign: "center",
- shadowX: "0",
- shadowY: "0",
- shadowBlur: "0",
- shadowRgba: "rgba(255,255,255,.90)",
- zIndex: ""
- };
+ enableDivider: true,
+ dividerColor: "",
+ textAlign: "center",
+ shadowX: "0",
+ shadowY: "0",
+ shadowBlur: "0",
+ shadowRgba: "rgba(255,255,255,.90)",
+ zIndex: ""
+ };
- let defaultImageContainerSettings = {
- borderWidth: "0",
- borderRadius: "0",
- borderColor: "grey",
- shadowX: "0",
- shadowY: "0",
- shadowBlur: "0",
- shadowRgba: "rgba(255,255,255,.90)",
- zIndex: "",
- invertX: false,
- invertY: false,
- autoplay: false
- };
+ let defaultImageContainerSettings = {
+ borderWidth: "0",
+ borderRadius: "0",
+ borderColor: "grey",
+ shadowX: "0",
+ shadowY: "0",
+ shadowBlur: "0",
+ shadowRgba: "rgba(255,255,255,.90)",
+ zIndex: "",
+ invertX: false,
+ invertY: false,
+ autoplay: false
+ };
- let wallpaper = "";
+ let wallpaper = "";
- // local states
- let editing = false;
- let moving = false;
- let resizing = false;
- let changingElement;
- let lastMouseX = 0;
- let lastMouseY = 0;
- let justImported = false;
- let activeTabId = "";
- let keepImageRatio = true;
- let repeatWallpaper = false;
- let audioLink = "";
- let autoplayAudio = true;
+ // local states
+ let editing = false;
+ let moving = false;
+ let resizing = false;
+ let changingElement;
+ let lastMouseX = 0;
+ let lastMouseY = 0;
+ let justImported = false;
+ let activeTabId = "";
+ let keepImageRatio = true;
+ let repeatWallpaper = false;
+ let audioLink = "";
+ let autoplayAudio = true;
- let numberOfTextContainers = 0;
- let numberOfMediaContainers = 0;
+ let numberOfTextContainers = 0;
+ let numberOfMediaContainers = 0;
- let cursors = {};
+ let cursors = {};
- // TODO: settings for italize / bold bookmark links
+ // TODO: settings for italize / bold bookmark links
- class Container {
- id;
- name;
- x;
- y;
- height;
- width;
- mediaUrl;
- settings;
- sections;
- clockIntervalId;
- youtubeId;
- imageHyperlink;
+ class Container {
+ id;
+ name;
+ x;
+ y;
+ height;
+ width;
+ mediaUrl;
+ settings;
+ sections;
+ clockIntervalId;
+ youtubeId;
+ imageHyperlink;
- constructor(
- id,
- name,
- x,
- y,
- height,
- width,
- mediaUrl,
- settings,
- sections,
- youtubeId,
- imageHyperlink
- ) {
- /* check if id is already used
- if (containerDataMap.has(name.replace(" ", "-").toLowerCase())) {
- alert("that name is already used, please use another");
- return;
- }*/
- // ensure there are no brackets in the name
- if (name.indexOf("<") != -1 || name.indexOf(">") != -1) {
- alert("no brackets in the name please");
- return;
- }
+ constructor(
+ id,
+ name,
+ x,
+ y,
+ height,
+ width,
+ mediaUrl,
+ settings,
+ sections,
+ youtubeId,
+ imageHyperlink
+ ) {
+ /* check if id is already used
+ if (containerDataMap.has(name.replace(" ", "-").toLowerCase())) {
+ alert("that name is already used, please use another");
+ return;
+ }*/
+ // ensure there are no brackets in the name
+ if (name.indexOf("<") != -1 || name.indexOf(">") != -1) {
+ alert("no brackets in the name please");
+ return;
+ }
- let loadingFromSave = (id != undefined);
- let isMedia = (mediaUrl != undefined);
+ let loadingFromSave = (id != undefined);
+ let isMedia = (mediaUrl != undefined);
- if (isMedia) {
- numberOfMediaContainers++;
+ if (isMedia) {
+ numberOfMediaContainers++;
- if (loadingFromSave) {
- this.name = name;
- this.id = id;
- this.x = x;
- this.y = y;
- this.height = height;
- this.width = width;
- this.settings = settings;
- this.mediaUrl = mediaUrl;
- this.youtubeId = youtubeId;
- this.imageHyperlink = imageHyperlink;
- }
+ if (loadingFromSave) {
+ this.name = name;
+ this.id = id;
+ this.x = x;
+ this.y = y;
+ this.height = height;
+ this.width = width;
+ this.settings = settings;
+ this.mediaUrl = mediaUrl;
+ this.youtubeId = youtubeId;
+ this.imageHyperlink = imageHyperlink;
+ }
- else {
- numberTotalContainers++;
+ else {
+ numberTotalContainers++;
- if (mediaUrl.includes("youtu.be")) {
- this.youtubeId = mediaUrl.slice(mediaUrl.indexOf(".be/")+4, mediaUrl.length);
- }
- else if (mediaUrl.includes("youtube.com")) {
- // normal youtube.com link
- this.youtubeId = mediaUrl.slice(mediaUrl.indexOf("v=")+2, mediaUrl.length);
- if (this.youtubeId.includes("&")) {
- this.youtubeId = this.youtubeId.slice(0, this.youtubeId.indexOf("&"));
+ if (mediaUrl.includes("youtu.be")) {
+ this.youtubeId = mediaUrl.slice(mediaUrl.indexOf(".be/")+4, mediaUrl.length);
+ }
+ else if (mediaUrl.includes("youtube.com")) {
+ // normal youtube.com link
+ this.youtubeId = mediaUrl.slice(mediaUrl.indexOf("v=")+2, mediaUrl.length);
+ if (this.youtubeId.includes("&")) {
+ this.youtubeId = this.youtubeId.slice(0, this.youtubeId.indexOf("&"));
+ }
}
- }
- if (name == "") {
- if (this.videoId != undefined) {
- this.name = "video " + numberOfMediaContainers;
+ if (name == "") {
+ if (this.videoId != undefined) {
+ this.name = "video " + numberOfMediaContainers;
+ }
+ else {
+ this.name = "image " + numberOfMediaContainers;
+ }
}
else {
- this.name = "image " + numberOfMediaContainers;
+ this.name = name;
}
- }
- else {
- this.name = name;
- }
- this.id = findLowestAvailableId();
- this.mediaUrl = mediaUrl;
-
- // deep copy default settings
- this.settings = JSON.parse(JSON.stringify(defaultImageContainerSettings));
+ this.id = findLowestAvailableId();
+ this.mediaUrl = mediaUrl;
+
+ // deep copy default settings
+ this.settings = JSON.parse(JSON.stringify(defaultImageContainerSettings));
- zIndexMap.set(String(numberOfMediaContainers + numberOfTextContainers), this.id);
- this.settings.zIndex = numberOfMediaContainers + numberOfTextContainers;
- }
+ zIndexMap.set(String(numberOfMediaContainers + numberOfTextContainers), this.id);
+ this.settings.zIndex = numberOfMediaContainers + numberOfTextContainers;
+ }
- if (this.youtubeId != undefined) {
- this.initializeYoutubeContainer();
+ if (this.youtubeId != undefined) {
+ this.initializeYoutubeContainer();
+ }
+ else {
+ this.initializeImageContainer(loadingFromSave);
+ }
}
else {
- this.initializeImageContainer(loadingFromSave);
- }
- }
- else {
- numberOfTextContainers++;
+ numberOfTextContainers++;
- if (loadingFromSave) {
- this.name = name;
- this.id = id;
- this.x = x;
- this.y = y;
- this.height = height;
- this.width = width;
- this.settings = settings;
- this.sections = sections;
- }
- else {
- numberTotalContainers++;
- if (name == "") this.name = "bookmark layer " + numberOfTextContainers;
- else this.name = name;
+ if (loadingFromSave) {
+ this.name = name;
+ this.id = id;
+ this.x = x;
+ this.y = y;
+ this.height = height;
+ this.width = width;
+ this.settings = settings;
+ this.sections = sections;
+ }
+ else {
+ numberTotalContainers++;
+ if (name == "") this.name = "bookmark layer " + numberOfTextContainers;
+ else this.name = name;
- this.id = findLowestAvailableId();
- this.sections = {};
+ this.id = findLowestAvailableId();
+ this.sections = {};
- // deep copy default settings
- this.settings = JSON.parse(JSON.stringify(defaultTextContainerSettings));
-
- zIndexMap.set(String(numberOfTextContainers + numberOfMediaContainers), this.id);
- this.settings.zIndex = numberOfMediaContainers + numberOfTextContainers;
- }
+ // deep copy default settings
+ this.settings = JSON.parse(JSON.stringify(defaultTextContainerSettings));
+
+ zIndexMap.set(String(numberOfTextContainers + numberOfMediaContainers), this.id);
+ this.settings.zIndex = numberOfMediaContainers + numberOfTextContainers;
+ }
- this.initializeTextContainer();
- this.loadBookmarks();
- }
+ this.initializeTextContainer();
+ this.loadBookmarks();
+ }
- this.applySettings();
- this.addContainerEventListeners();
+ this.applySettings();
+ this.addContainerEventListeners();
- // and save
- containerDataMap.set(this.id, this);
- }
-
+ // and save
+ containerDataMap.set(this.id, this);
+ }
+
- /**
- * creates image element, applySettings() will do the rest
- */
- initializeImageContainer(loadingFromSave) {
- document.body.insertAdjacentHTML(
- "beforeend",
+ /**
+ * creates image element, applySettings() will do the rest
+ */
+ initializeImageContainer(loadingFromSave) {
+ document.body.insertAdjacentHTML(
+ "beforeend",
+ `
+ ${loadingFromSave && this.imageHyperlink ?
+ `<a id="` + this.id + `--hyperlink" href="` + this.imageHyperlink + `">`
+ : ``}
+ <img
+ class="movable ${this.imageHyperlink ? "hyperlinkedImage" : ""}"
+ id="${this.id}"
+ style="z-index: ${numberOfMediaContainers + numberOfTextContainers};"
+ src="${this.mediaUrl}"
+ draggable=false
+ tabindex="0"
+ ></img>
+ ${loadingFromSave ? `</a>` : ``}
`
- ${loadingFromSave && this.imageHyperlink ?
- `<a id="` + this.id + `--hyperlink" href="` + this.imageHyperlink + `">`
- : ``}
- <img
- class="movable ${this.imageHyperlink ? "hyperlinkedImage" : ""}"
- id="${this.id}"
- style="z-index: ${numberOfMediaContainers + numberOfTextContainers};"
- src="${this.mediaUrl}"
- draggable=false
- tabindex="0"
- ></img>
- ${loadingFromSave ? `</a>` : ``}
- `
- );
- }
-
- initializeYoutubeContainer() {
- let embedLink = "https://www.youtube.com/embed/" + this.youtubeId;
- if (this.settings.autoplay) {
- embedLink += "?autoplay=1";
+ );
}
- document.body.insertAdjacentHTML(
- "beforeend",
- `
- <div
- id=${this.id}
- class="movable media"
- style="width:640px;height:480px"
- tabindex="0"
- >
- <div class="youtubeEmbedCover" style="z-index: ${900 + numberOfMediaContainers + numberOfTextContainers}; ${editing ? 'display: block"' : 'display:none;"'}></div>
- <iframe
- class="youtubeEmbed"
- id=${this.id + "--embed-frame"}
- style="z-index: ${numberOfMediaContainers + numberOfTextContainers}; "
- src="${embedLink}"
- />
- </div>
- `
- );
- }
+ initializeYoutubeContainer() {
+ let embedLink = "https://www.youtube.com/embed/" + this.youtubeId;
+ if (this.settings.autoplay) {
+ embedLink += "?autoplay=1";
+ }
- /**
- * creates text container element, loadBookmarks() and applySettings() do the rest
- */
- initializeTextContainer() {
- // insert default container HTML
- document.body.insertAdjacentHTML(
- "beforeend",
+ document.body.insertAdjacentHTML(
+ "beforeend",
+ `
+ <div
+ id=${this.id}
+ class="movable media"
+ style="width:640px;height:480px"
+ tabindex="0"
+ >
+ <div class="youtubeEmbedCover" style="z-index: ${900 + numberOfMediaContainers + numberOfTextContainers}; ${editing ? 'display: block"' : 'display:none;"'}></div>
+ <iframe
+ class="youtubeEmbed"
+ id=${this.id + "--embed-frame"}
+ style="z-index: ${numberOfMediaContainers + numberOfTextContainers}; "
+ src="${embedLink}"
+ />
+ </div>
`
- <div class="movable container" id=${this.id} tabindex="0" >
- <div class="autoMarginHolder">
- <div id=${this.id + "-header"} class="containerHeader">
- <div id=${this.id + "-date"}></div>
- <div id=${this.id + "-clock"}></div>
+ );
+ }
+
+ /**
+ * creates text container element, loadBookmarks() and applySettings() do the rest
+ */
+ initializeTextContainer() {
+ // insert default container HTML
+ document.body.insertAdjacentHTML(
+ "beforeend",
+ `
+ <div class="movable container" id=${this.id} tabindex="0" >
+ <div class="autoMarginHolder">
+ <div id=${this.id + "-header"} class="containerHeader">
+ <div id=${this.id + "-date"}></div>
+ <div id=${this.id + "-clock"}></div>
+ </div>
+ <hr id=${this.id + "-divider"} />
+ <div id=${this.id + "-bookmarks"} ></div>
</div>
- <hr id=${this.id + "-divider"} />
- <div id=${this.id + "-bookmarks"} ></div>
</div>
- </div>
- `
- );
+ `
+ );
- /** set up the time */
- const timeFormat = new Intl.DateTimeFormat([], {
- timeZone: "America/New_York",
- hour12: false,
- hour: "numeric",
- minute: "numeric",
- second: "numeric",
- });
- // set time immediately so it shows upon load
- document.getElementById(this.id + "-clock").innerText =
- timeFormat.format(new Date());
- // set time on interval to continue to update
- this.clockIntervalId = setInterval(() => {
+ /** set up the time */
+ const timeFormat = new Intl.DateTimeFormat([], {
+ timeZone: "America/New_York",
+ hour12: false,
+ hour: "numeric",
+ minute: "numeric",
+ second: "numeric",
+ });
+ // set time immediately so it shows upon load
document.getElementById(this.id + "-clock").innerText =
timeFormat.format(new Date());
- }, 1000);
+ // set time on interval to continue to update
+ this.clockIntervalId = setInterval(() => {
+ document.getElementById(this.id + "-clock").innerText =
+ timeFormat.format(new Date());
+ }, 1000);
- /** set up date */
- const dateFormat = new Intl.DateTimeFormat([], {
- weekday: "long",
- day: "numeric",
- month: "long",
- });
- document.getElementById(this.id + "-date").innerText =
- dateFormat.format(new Date());
+ /** set up date */
+ const dateFormat = new Intl.DateTimeFormat([], {
+ weekday: "long",
+ day: "numeric",
+ month: "long",
+ });
+ document.getElementById(this.id + "-date").innerText =
+ dateFormat.format(new Date());
- // save data if not loading existing container
- if (this.x == undefined && this.y == undefined) {
- let newContainer = document.getElementById(this.id);
- this.x = newContainer.offsetLeft;
- this.y = newContainer.offsetTop;
- this.height = newContainer.offsetHeight;
- this.width = newContainer.offsetWidth;
+ // save data if not loading existing container
+ if (this.x == undefined && this.y == undefined) {
+ let newContainer = document.getElementById(this.id);
+ this.x = newContainer.offsetLeft;
+ this.y = newContainer.offsetTop;
+ this.height = newContainer.offsetHeight;
+ this.width = newContainer.offsetWidth;
+ }
}
- }
-
- /**
- * inserts and populates the settings inputs for the given text container
- */
- createTextContainerMenuListing() {
- let zindex = parseInt(this.settings.zIndex);
- let upButtons = `
- <div>
- <button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
- <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
- </div>
-
- `;
- let downButtons = `
- <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}>
- <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
- <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
- </div>
- `;
+
+ /**
+ * inserts and populates the settings inputs for the given text container
+ */
+ createTextContainerMenuListing() {
+ let zindex = parseInt(this.settings.zIndex);
+ let upButtons = `
+ <div>
+ <button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
+ <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
+ </div>
+
+ `;
+ let downButtons = `
+ <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}>
+ <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
+ <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
+ </div>
+ `;
- document.getElementById("containers").insertAdjacentHTML(
- "afterbegin",
- `
- <div class="containerListing" id=${this.id + "-container-listing"} tabIndex="0">
+ document.getElementById("containers").insertAdjacentHTML(
+ "afterbegin",
+ `
+ <div class="containerListing" id=${this.id + "-container-listing"} tabIndex="0">
- <div class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">
- <p id=${this.id + "--listing-header"}>[${this.settings.zIndex}]: ${this.name}</p>
- <p class="expandedMenuIndicator">-</p>
- </div>
- <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block; margin: 0;">
+ <div class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">
+ <p id=${this.id + "--listing-header"}>[${this.settings.zIndex}]: ${this.name}</p>
+ <p class="expandedMenuIndicator">-</p>
+ </div>
+ <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block; margin: 0;">
- <div class="renameAndClone">
- <div>
- <input id=${this.id + "--rename-input"} placeholder="new name here" />
- <button id=${this.id + "--rename-button"} onclick="renameContainer(this)">rename layer</button>
+ <div class="renameAndClone">
+ <div>
+ <input id=${this.id + "--rename-input"} placeholder="new name here" />
+ <button id=${this.id + "--rename-button"} onclick="renameContainer(this)">rename layer</button>
+ </div>
+ <button id=${this.id + "--clone-button"} onclick="cloneContainer(this)">clone layer</button>
</div>
- <button id=${this.id + "--clone-button"} onclick="cloneContainer(this)">clone layer</button>
- </div>
- <hr />
+ <hr />
- <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
- <p>bookmarks</p>
- <p class="expandedMenuIndicator">+</p>
- </div>
- <div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
- <p>add new</p>
+ <p>bookmarks</p>
<p class="expandedMenuIndicator">+</p>
</div>
- <div class="expandableMenu" id=${this.id + "-bookmark-menu--add-new"} >
+ <div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
+ <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
+ <p>add new</p>
+ <p class="expandedMenuIndicator">+</p>
+ </div>
+ <div class="expandableMenu" id=${this.id + "-bookmark-menu--add-new"} >
- <div class="newBookmarkForm">
- <input
- id=${this.id + "-url-input"}
- type="text" name="url"
- placeholder="enter URL for bookmark"
- style="width: 100%;"
- />
+ <div class="newBookmarkForm">
+ <input
+ id=${this.id + "-url-input"}
+ type="text" name="url"
+ placeholder="enter URL for bookmark"
+ style="width: 100%;"
+ />
- <input
- id=${this.id + "-label-input"}
- type="text" name="label"
- placeholder="enter label for bookmark"
- style="width: 100%"
- />
+ <input
+ id=${this.id + "-label-input"}
+ type="text" name="label"
+ placeholder="enter label for bookmark"
+ style="width: 100%"
+ />
- <input
- id=${this.id + "-section-input"}
- type="text" name="section"
- placeholder="optional: enter a new or existing section name"
- style="width: 100%"
- />
+ <input
+ id=${this.id + "-section-input"}
+ type="text" name="section"
+ placeholder="optional: enter a new or existing section name"
+ style="width: 100%"
+ />
- <button
- id=${this.id + "-add-link-button"}
- onclick="addLink(this)"
- style="width: 50%">
- add it
- </button>
+ <button
+ id=${this.id + "-add-link-button"}
+ onclick="addLink(this)"
+ style="width: 50%">
+ add it
+ </button>
+ </div>
</div>
- </div>
- <div class="menuHeader">current bookmarks</div>
- <div id=${this.id + "-bookmark-menu--listings"} class="bookmarkListingContainer">
+ <div class="menuHeader">current bookmarks</div>
+ <div id=${this.id + "-bookmark-menu--listings"} class="bookmarkListingContainer">
+ </div>
+
</div>
- </div>
-
- <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
- <p>container styling</p>
- <p class="expandedMenuIndicator">+</p>
- </div>
- <div class="expandableMenu">
-
- <p class="menuHeader">background color</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-bg-color"}>set background color: </label>
- <input id=${this.id + "-settings-bg-color"} type="color" />
- </div>
-
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label>
- <input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" />
- </div>
+ <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
+ <p>container styling</p>
+ <p class="expandedMenuIndicator">+</p>
+ </div>
+ <div class="expandableMenu">
- <p class="menuHeader">shape</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-border-radius"}>roundness: </label>
- <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
- </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-rotation"}>rotation: </label>
- <input id=${this.id + "-settings-rotation"} type="range" min="-180" max="180" />
- </div>
+ <p class="menuHeader">background color</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-bg-color"}>set background color: </label>
+ <input id=${this.id + "-settings-bg-color"} type="color" />
+ </div>
- <p class="menuHeader">border</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-border-color"}>set border color: </label>
- <input id=${this.id + "-settings-border-color"} type="color" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label>
+ <input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-border-width"}>set border width: </label>
- <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
- </div>
+ <p class="menuHeader">shape</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-border-radius"}>roundness: </label>
+ <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
+ </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-rotation"}>rotation: </label>
+ <input id=${this.id + "-settings-rotation"} type="range" min="-180" max="180" />
+ </div>
-
+ <p class="menuHeader">border</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-border-color"}>set border color: </label>
+ <input id=${this.id + "-settings-border-color"} type="color" />
+ </div>
- <p class="menuHeader">shadow / glow</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
- <input id=${this.id + "-settings-shadow-color"} type="color" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-border-width"}>set border width: </label>
+ <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
+ </div>
- <div class="containerOptionListing">
- <label>shadow opacity:</label>
- <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
- </div>
+
- <br />
+ <p class="menuHeader">shadow / glow</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
+ <input id=${this.id + "-settings-shadow-color"} type="color" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
- <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
- </div>
+ <div class="containerOptionListing">
+ <label>shadow opacity:</label>
+ <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
- <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
- </div>
+ <br />
- <br />
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
+ <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
- <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
- </div>
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
+ <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
+ </div>
- <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
- <p>date / clock / divider</p>
- <p class="expandedMenuIndicator">+</p>
- </div>
- <div class="expandableMenu">
+ <br />
- <p class="menuHeader">date + time options</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
+ <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
+ </div>
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-clock-color"}>set font color: </label>
- <input id=${this.id + "-settings-clock-color"} type="color" />
- </div>
+ <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
+ <p>date / clock / divider</p>
+ <p class="expandedMenuIndicator">+</p>
+ </div>
+ <div class="expandableMenu">
- <div class="containerOptionListing">
- <label>set font size (px): </label>
- <input id=${this.id + "-settings-clock-size"} />
- </div>
+ <p class="menuHeader">date + time options</p>
- <br />
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-clock-color"}>set font color: </label>
+ <input id=${this.id + "-settings-clock-color"} type="color" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-date-toggle"}>show date?</label>
- <input id=${this.id + "-settings-date-toggle"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label>set font size (px): </label>
+ <input id=${this.id + "-settings-clock-size"} />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-date-bold"}>bold?</label>
- <input id=${this.id + "-settings-date-bold"} type="checkbox" />
- </div>
+ <br />
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-date-italic"}>italic?</label>
- <input id=${this.id + "-settings-date-italic"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-date-toggle"}>show date?</label>
+ <input id=${this.id + "-settings-date-toggle"} type="checkbox" />
+ </div>
- <br />
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-date-bold"}>bold?</label>
+ <input id=${this.id + "-settings-date-bold"} type="checkbox" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-clock-toggle"}>show clock?</label>
- <input id=${this.id + "-settings-clock-toggle"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-date-italic"}>italic?</label>
+ <input id=${this.id + "-settings-date-italic"} type="checkbox" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-clock-bold"}>bold?</label>
- <input id=${this.id + "-settings-clock-bold"} type="checkbox" />
- </div>
+ <br />
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-clock-italic"}>italic?</label>
- <input id=${this.id + "-settings-clock-italic"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-clock-toggle"}>show clock?</label>
+ <input id=${this.id + "-settings-clock-toggle"} type="checkbox" />
+ </div>
- <p class="menuHeader">divider options</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-divider-toggle"}>display divider?</label>
- <input id=${this.id + "-settings-divider-toggle"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-clock-bold"}>bold?</label>
+ <input id=${this.id + "-settings-clock-bold"} type="checkbox" />
+ </div>
- <div class="containerOptionListing">
- <label>divider color: </label>
- <input id=${this.id + "-settings-divider-color"} type="color" />
- </div>
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-clock-italic"}>italic?</label>
+ <input id=${this.id + "-settings-clock-italic"} type="checkbox" />
+ </div>
- <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
- <p>section / link / font options</p>
- <p class="expandedMenuIndicator">+</p>
- </div>
- <div class="expandableMenu">
+ <p class="menuHeader">divider options</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-divider-toggle"}>display divider?</label>
+ <input id=${this.id + "-settings-divider-toggle"} type="checkbox" />
+ </div>
- <p class="menuHeader">section text options</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-section-size"}>set section size (px): </label>
- <input id=${this.id + "-settings-section-size"} />
- </div>
+ <div class="containerOptionListing">
+ <label>divider color: </label>
+ <input id=${this.id + "-settings-divider-color"} type="color" />
+ </div>
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-section-color"}>set section color: </label>
- <input id=${this.id + "-settings-section-color"} type="color" />
- </div>
+ <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
+ <p>section / link / font options</p>
+ <p class="expandedMenuIndicator">+</p>
+ </div>
+ <div class="expandableMenu">
- <div class="containerOptionListing">
- <label for="sectionBoldToggle">bold?</label>
- <input id=${this.id + "-settings-section-bold"} type="checkbox" />
- </div>
+ <p class="menuHeader">section text options</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-section-size"}>set section size (px): </label>
+ <input id=${this.id + "-settings-section-size"} />
+ </div>
- <div class="containerOptionListing">
- <label for="sectionItalicToggle">italic?</label>
- <input id=${this.id + "-settings-section-italic"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-section-color"}>set section color: </label>
+ <input id=${this.id + "-settings-section-color"} type="color" />
+ </div>
- <p class="menuHeader">bookmark text options</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-link-size"}>set link size (px): </label>
- <input id=${this.id + "-settings-link-size"} />
- </div>
+ <div class="containerOptionListing">
+ <label for="sectionBoldToggle">bold?</label>
+ <input id=${this.id + "-settings-section-bold"} type="checkbox" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-link-color"}>set link color: </label>
- <input id=${this.id + "-settings-link-color"} type="color" />
- </div>
+ <div class="containerOptionListing">
+ <label for="sectionItalicToggle">italic?</label>
+ <input id=${this.id + "-settings-section-italic"} type="checkbox" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-link-decor"}>underline links?</label>
- <input id=${this.id + "-settings-link-decor"} type="checkbox" />
- </div>
+ <p class="menuHeader">bookmark text options</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-link-size"}>set link size (px): </label>
+ <input id=${this.id + "-settings-link-size"} />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-link-bold"}>bold links?</label>
- <input id=${this.id + "-settings-link-bold"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-link-color"}>set link color: </label>
+ <input id=${this.id + "-settings-link-color"} type="color" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-link-italic"}>italic links?</label>
- <input id=${this.id + "-settings-link-italic"} type="checkbox" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-link-decor"}>underline links?</label>
+ <input id=${this.id + "-settings-link-decor"} type="checkbox" />
+ </div>
- <p class="menuHeader">general layer font options</p>
- <div class="containerOptionListing">
- <div>
- <p style="margin: 0;">
- change font:<br /><span style="font-size: .8rem">(see help tab for more info)</span><br />
- </p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-link-bold"}>bold links?</label>
+ <input id=${this.id + "-settings-link-bold"} type="checkbox" />
</div>
- <div style="display: flex; flex-direction: column; align-items: end;">
- <input id=${this.id + "-settings-font-input"} />
- <br />
- <button id=${this.id + "-settings-set-font-button"}>set font</button>
- <br />
- <b>current font:</b>
- <span id=${this.id + "-settings-font-name"}></span>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-link-italic"}>italic links?</label>
+ <input id=${this.id + "-settings-link-italic"} type="checkbox" />
</div>
- </div>
- <br />
- <div class="containerOptionListing" >
- <p style="margin-top: 0;">align text:</p>
- <div style="display: flex; flex-direction: column; align-items: end;">
+ <p class="menuHeader">general layer font options</p>
+ <div class="containerOptionListing">
<div>
- <label for=${this.id + "-settings-left-align"}>left</label>
- <input id=${this.id + "-settings-left-align"} type="radio" name="align" />
+ <p style="margin: 0;">
+ change font:<br /><span style="font-size: .8rem">(see help tab for more info)</span><br />
+ </p>
</div>
- <div>
- <label for=${this.id + "-settings-center-align"}>center</label>
- <input id=${this.id + "-settings-center-align"} type="radio" name="align" />
+
+ <div style="display: flex; flex-direction: column; align-items: end;">
+ <input id=${this.id + "-settings-font-input"} />
+ <br />
+ <button id=${this.id + "-settings-set-font-button"}>set font</button>
+ <br />
+ <b>current font:</b>
+ <span id=${this.id + "-settings-font-name"}></span>
</div>
- <div>
- <label for=${this.id + "-settings-right-align"}>right</label>
- <input id=${this.id + "-settings-right-align"} type="radio" name="align" />
+ </div>
+ <br />
+ <div class="containerOptionListing" >
+ <p style="margin-top: 0;">align text:</p>
+
+ <div style="display: flex; flex-direction: column; align-items: end;">
+ <div>
+ <label for=${this.id + "-settings-left-align"}>left</label>
+ <input id=${this.id + "-settings-left-align"} type="radio" name="align" />
+ </div>
+ <div>
+ <label for=${this.id + "-settings-center-align"}>center</label>
+ <input id=${this.id + "-settings-center-align"} type="radio" name="align" />
+ </div>
+ <div>
+ <label for=${this.id + "-settings-right-align"}>right</label>
+ <input id=${this.id + "-settings-right-align"} type="radio" name="align" />
+ </div>
</div>
</div>
- </div>
- </div>
- </div>
+ </div>
+ </div>
- <div class="manageButtons">
- <div id=${this.id + "--manage-buttons"} >
- ${zindex == numberTotalContainers ? `` : upButtons}
- ${zindex == 1 ? `` : downButtons}
+ <div class="manageButtons">
+ <div id=${this.id + "--manage-buttons"} >
+ ${zindex == numberTotalContainers ? `` : upButtons}
+ ${zindex == 1 ? `` : downButtons}
+ </div>
+ <div>
+ <button id=${this.id + "--delete-button"} class="deleteButton" onclick="deleteContainer(this)">delete layer</button>
</div>
- <div>
- <button id=${this.id + "--delete-button"} class="deleteButton" onclick="deleteContainer(this)">delete layer</button>
</div>
- </div>
- `
- );
+ `
+ );
- /** fill in inputs with current values */
- let settings = this.settings;
- // SHADOW / GLOW
- document.getElementById(this.id + "-settings-shadow-x").value =
- settings.shadowX;
- document.getElementById(this.id + "-settings-shadow-y").value =
- settings.shadowY;
- document.getElementById(this.id + "-settings-shadow-blur").value =
- settings.shadowBlur;
- document.getElementById(this.id + "-settings-shadow-color").value =
- rgbToHex(
+ /** fill in inputs with current values */
+ let settings = this.settings;
+ // SHADOW / GLOW
+ document.getElementById(this.id + "-settings-shadow-x").value =
+ settings.shadowX;
+ document.getElementById(this.id + "-settings-shadow-y").value =
+ settings.shadowY;
+ document.getElementById(this.id + "-settings-shadow-blur").value =
+ settings.shadowBlur;
+ document.getElementById(this.id + "-settings-shadow-color").value =
+ rgbToHex(
+ settings.shadowRgba
+ .replace("rgba(", "")
+ .slice(0, -1)
+ .split(",")
+ .splice(0, 3)
+ );
+ document.getElementById(this.id + "-settings-shadow-alpha").value =
settings.shadowRgba
.replace("rgba(", "")
.slice(0, -1)
- .split(",")
- .splice(0, 3)
- );
- document.getElementById(this.id + "-settings-shadow-alpha").value =
- settings.shadowRgba
- .replace("rgba(", "")
- .slice(0, -1)
- .split(",")[3] * 100;
- // BORDER
- document.getElementById(this.id + "-settings-border-color").value =
- settings.borderColor;
- document.getElementById(this.id + "-settings-border-width").value =
- settings.borderWidth;
- document.getElementById(this.id + "-settings-border-radius").value =
- settings.borderRadius;
- // ROTATION
- document.getElementById(this.id + "-settings-rotation").value =
- settings.rotation;
- // FONT
- if (settings.fontName == "") {
- document.getElementById(this.id + "-settings-font-name").innerHTML =
- "browser default";
- } else {
- document.getElementById(this.id + "-settings-font-name").innerHTML =
- settings.fontName;
- }
- // TEXT ALIGNMENT
- document.getElementById(this.id + "-settings-left-align").checked =
- !settings.textAlign == "left";
- document.getElementById(this.id + "-settings-center-align").checked =
- settings.textAlign == "center";
- document.getElementById(this.id + "-settings-right-align").checked =
- settings.textAlign == "right";
- // BOOKMARK OPTIONS
- document.getElementById(this.id + "-settings-section-color").value =
- settings.sectionColor;
- document.getElementById(this.id + "-settings-section-size").value =
- settings.sectionSize;
- document.getElementById(this.id + "-settings-section-bold").checked =
- settings.sectionBold;
- document.getElementById(this.id + "-settings-section-italic").checked =
- settings.sectionItalic;
- document.getElementById(this.id + "-settings-link-color").value =
- settings.linkColor;
- document.getElementById(this.id + "-settings-link-size").value =
- settings.linkSize;
- document.getElementById(this.id + "-settings-link-decor").checked =
- settings.linkDecor;
- document.getElementById(this.id + "-settings-link-bold").checked =
- settings.linkBold;
- document.getElementById(this.id + "-settings-link-italic").checked =
- settings.linkItalic;
- // BACKGROUND COLOR
- document.getElementById(this.id + "-settings-bg-color").value =
- rgbToHex(
+ .split(",")[3] * 100;
+ // BORDER
+ document.getElementById(this.id + "-settings-border-color").value =
+ settings.borderColor;
+ document.getElementById(this.id + "-settings-border-width").value =
+ settings.borderWidth;
+ document.getElementById(this.id + "-settings-border-radius").value =
+ settings.borderRadius;
+ // ROTATION
+ document.getElementById(this.id + "-settings-rotation").value =
+ settings.rotation;
+ // FONT
+ if (settings.fontName == "") {
+ document.getElementById(this.id + "-settings-font-name").innerHTML =
+ "browser default";
+ } else {
+ document.getElementById(this.id + "-settings-font-name").innerHTML =
+ settings.fontName;
+ }
+ // TEXT ALIGNMENT
+ document.getElementById(this.id + "-settings-left-align").checked =
+ !settings.textAlign == "left";
+ document.getElementById(this.id + "-settings-center-align").checked =
+ settings.textAlign == "center";
+ document.getElementById(this.id + "-settings-right-align").checked =
+ settings.textAlign == "right";
+ // BOOKMARK OPTIONS
+ document.getElementById(this.id + "-settings-section-color").value =
+ settings.sectionColor;
+ document.getElementById(this.id + "-settings-section-size").value =
+ settings.sectionSize;
+ document.getElementById(this.id + "-settings-section-bold").checked =
+ settings.sectionBold;
+ document.getElementById(this.id + "-settings-section-italic").checked =
+ settings.sectionItalic;
+ document.getElementById(this.id + "-settings-link-color").value =
+ settings.linkColor;
+ document.getElementById(this.id + "-settings-link-size").value =
+ settings.linkSize;
+ document.getElementById(this.id + "-settings-link-decor").checked =
+ settings.linkDecor;
+ document.getElementById(this.id + "-settings-link-bold").checked =
+ settings.linkBold;
+ document.getElementById(this.id + "-settings-link-italic").checked =
+ settings.linkItalic;
+ // BACKGROUND COLOR
+ document.getElementById(this.id + "-settings-bg-color").value =
+ rgbToHex(
+ settings.backgroundRgba
+ .replace("rgba(", "")
+ .slice(0, -1)
+ .split(",")
+ .splice(0, 3)
+ );
+ document.getElementById(this.id + "-settings-bg-alpha").value =
settings.backgroundRgba
.replace("rgba(", "")
.slice(0, -1)
- .split(",")
- .splice(0, 3)
- );
- document.getElementById(this.id + "-settings-bg-alpha").value =
- settings.backgroundRgba
- .replace("rgba(", "")
- .slice(0, -1)
- .split(",")[3] * 100;
- // HEADER OPTIONS
- document.getElementById(this.id + "-settings-date-toggle").checked =
- settings.enableDate;
- document.getElementById(this.id + "-settings-clock-toggle").checked =
- settings.enableClock;
- document.getElementById(this.id + "-settings-clock-color").value =
- settings.headerColor;
- document.getElementById(this.id + "-settings-clock-size").value =
- settings.headerSize;
- document.getElementById(this.id + "-settings-date-bold").checked =
- settings.dateBold;
- document.getElementById(this.id + "-settings-clock-bold").checked =
- settings.clockBold;
- document.getElementById(this.id + "-settings-date-italic").checked =
- settings.dateItalic;
- document.getElementById(this.id + "-settings-clock-italic").checked =
- settings.clockItalic;
- // DIVIDER
- document.getElementById(this.id + "-settings-divider-toggle").checked =
- settings.enableDivider;
- document.getElementById(this.id + "-settings-divider-color").value =
- settings.dividerColor;
- }
-
- /**
- * [re]renders bookmarks shown in the settings menu for a given text container
- */
- loadBookmarkListings() {
- if (Object.keys(this.sections).length == 0) {
- let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
- bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`;
- return;
+ .split(",")[3] * 100;
+ // HEADER OPTIONS
+ document.getElementById(this.id + "-settings-date-toggle").checked =
+ settings.enableDate;
+ document.getElementById(this.id + "-settings-clock-toggle").checked =
+ settings.enableClock;
+ document.getElementById(this.id + "-settings-clock-color").value =
+ settings.headerColor;
+ document.getElementById(this.id + "-settings-clock-size").value =
+ settings.headerSize;
+ document.getElementById(this.id + "-settings-date-bold").checked =
+ settings.dateBold;
+ document.getElementById(this.id + "-settings-clock-bold").checked =
+ settings.clockBold;
+ document.getElementById(this.id + "-settings-date-italic").checked =
+ settings.dateItalic;
+ document.getElementById(this.id + "-settings-clock-italic").checked =
+ settings.clockItalic;
+ // DIVIDER
+ document.getElementById(this.id + "-settings-divider-toggle").checked =
+ settings.enableDivider;
+ document.getElementById(this.id + "-settings-divider-color").value =
+ settings.dividerColor;
}
+
+ /**
+ * [re]renders bookmarks shown in the settings menu for a given text container
+ */
+ loadBookmarkListings() {
+ if (Object.keys(this.sections).length == 0) {
+ let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
+ bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`;
+ return;
+ }
- let sectionData = Object.values(this.sections);
- let settings = this.settings;
-
- let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
- bookmarkListings.innerHTML = "";
-
- // [in]render the section listings
- for (let i = 0; i < sectionData.length; i++) {
- bookmarkListings.insertAdjacentHTML(
- "beforeend",
- `
- ${i == 0 ? "" : `<br />`}
- <div id="${this.id}-section-listing--${i}" class="sectionListingContainer">
- <span class=${this.id + "-section"}>
- ${sectionData[i].label == "" ? "<u>uncategorized links</u>: " : "<u>section</u>: " + sectionData[i].label}
- </span>
-
- <div class="bookmarkListingButtons">
- ${(i > 1) ? `
- <button onClick="reorderSection(this, 'up')" class="bookmarkButton">
- up
- </button>
- ` : `` }
-
- ${(i > 0) && (i < sectionData.length - 1) ? `
- <button onClick="reorderSection(this, 'down')" class="bookmarkButton">
- down
- </button>
- ` : `` }
- <button onClick="deleteSection(this)" class="deleteButton">delete section</button>
- </div>
- </div>
- `
- );
- }
+ let sectionData = Object.values(this.sections);
+ let settings = this.settings;
- // [re]render the link listings
- for (let s = sectionData.length - 1; s >= 0; s--) {
- for (let l = sectionData[s].links.length - 1; l >= 0; l--) {
- let targetSection = document.getElementById(
- this.id + "-section-listing--" + s
- );
+ let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
+ bookmarkListings.innerHTML = "";
- targetSection.insertAdjacentHTML(
- "afterend",
+ // [in]render the section listings
+ for (let i = 0; i < sectionData.length; i++) {
+ bookmarkListings.insertAdjacentHTML(
+ "beforeend",
`
- <div id="${this.id}-section-listing--${s}--${l}" class="linkListingContainer">
-
- <span class="${this.id}-link">
- ${sectionData[s].links[l].label}
+ ${i == 0 ? "" : `<br />`}
+ <div id="${this.id}-section-listing--${i}" class="sectionListingContainer">
+ <span class=${this.id + "-section"}>
+ ${sectionData[i].label == "" ? "<u>uncategorized links</u>: " : "<u>section</u>: " + sectionData[i].label}
</span>
<div class="bookmarkListingButtons">
- ${l > 0 ? `
- <button onClick="reorderLink(this, 'up')" class="bookmarkButton">
+ ${(i > 1) ? `
+ <button onClick="reorderSection(this, 'up')" class="bookmarkButton">
up
</button>
- ` : ``
- }
- ${l < sectionData[s].links.length - 1 ? `
- <button onClick="reorderLink(this, 'down')" class="bookmarkButton">
- down
+ ` : `` }
+
+ ${(i > 0) && (i < sectionData.length - 1) ? `
+ <button onClick="reorderSection(this, 'down')" class="bookmarkButton">
+ down
</button>
- ` : ``
- }
- <button onClick="deleteLink(this)" class="deleteButton">delete link</button>
+ ` : `` }
+ <button onClick="deleteSection(this)" class="deleteButton">delete section</button>
</div>
</div>
`
);
}
- }
- }
- createMediaContainerMenuListing() {
- let zindex = this.settings.zIndex;
- let upButtons = `
- <div>
- <button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
- <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
- </div>
- `;
- let downButtons = `
- <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}>
- <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
- <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
- </div>
- `;
- let youtubeEmbedOptions = `
- <p class="menuHeader">youtube autoplay</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-youtube-autoplay"}>autoplay on load?</label>
- <input id=${this.id + "-settings-youtube-autoplay"} type="checkbox" onclick="toggleYoutubeAutoplay(this)" />
+ // [re]render the link listings
+ for (let s = sectionData.length - 1; s >= 0; s--) {
+ for (let l = sectionData[s].links.length - 1; l >= 0; l--) {
+ let targetSection = document.getElementById(
+ this.id + "-section-listing--" + s
+ );
+
+ targetSection.insertAdjacentHTML(
+ "afterend",
+ `
+ <div id="${this.id}-section-listing--${s}--${l}" class="linkListingContainer">
+
+ <span class="${this.id}-link">
+ ${sectionData[s].links[l].label}
+ </span>
+
+ <div class="bookmarkListingButtons">
+ ${l > 0 ? `
+ <button onClick="reorderLink(this, 'up')" class="bookmarkButton">
+ up
+ </button>
+ ` : ``
+ }
+ ${l < sectionData[s].links.length - 1 ? `
+ <button onClick="reorderLink(this, 'down')" class="bookmarkButton">
+ down
+ </button>
+ ` : ``
+ }
+ <button onClick="deleteLink(this)" class="deleteButton">delete link</button>
+ </div>
+ </div>
+ `
+ );
+ }
+ }
+ }
+ createMediaContainerMenuListing() {
+ let zindex = this.settings.zIndex;
+ let upButtons = `
+ <div>
+ <button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
+ <button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
+ </div>
+ `;
+ let downButtons = `
+ <div ${zindex == 1 ? `` : `style="margin-top: .25rem;"`}>
+ <button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
+ <button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
</div>
- `;
+ `;
- let imageHyperlinkOptions = `
- <p class="menuHeader">set image hyperlink</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-image-hyperlink-input"}>hyperlink image</label>
+ let youtubeEmbedOptions = `
+ <p class="menuHeader">youtube autoplay</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-youtube-autoplay"}>autoplay on load?</label>
+ <input id=${this.id + "-settings-youtube-autoplay"} type="checkbox" onclick="toggleYoutubeAutoplay(this)" />
+ </div>
+ `;
+
+ let imageHyperlinkOptions = `
+ <p class="menuHeader">set image hyperlink</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-image-hyperlink-input"}>hyperlink image</label>
- <div style="display: flex; flex-direction: column; align-items: end;">
- <input
- id=${this.id + "-settings-image-hyperlink-input"}
- placeholder="URL to apply to image"
- style="width: 100%;"
- type="text"
- />
- <button id=${this.id + "-settings-image-hyperlink-set-button"} onclick="setImageHyperlink(this)">
- set hyperlink
- </button>`;
+ <div style="display: flex; flex-direction: column; align-items: end;">
+ <input
+ id=${this.id + "-settings-image-hyperlink-input"}
+ placeholder="URL to apply to image"
+ style="width: 100%;"
+ type="text"
+ />
+ <button id=${this.id + "-settings-image-hyperlink-set-button"} onclick="setImageHyperlink(this)">
+ set hyperlink
+ </button>`;
- if (this.imageHyperlink) {
+ if (this.imageHyperlink) {
+ imageHyperlinkOptions += `
+ <button id=${this.id + "-settings-image-hyperlink-remove-button"} onclick="removeImageHyperlink(this)">
+ remove hyperlink
+ </button>`;
+ }
+
imageHyperlinkOptions += `
- <button id=${this.id + "-settings-image-hyperlink-remove-button"} onclick="removeImageHyperlink(this)">
- remove hyperlink
- </button>`;
- }
-
- imageHyperlinkOptions += `
+ </div>
</div>
- </div>
- `;
+ `;
- document.getElementById("containers").insertAdjacentHTML(
- "afterbegin",
- `
- <div class="containerListing" id=${this.id + "-container-listing"}>
+ document.getElementById("containers").insertAdjacentHTML(
+ "afterbegin",
+ `
+ <div class="containerListing" id=${this.id + "-container-listing"}>
- <div class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">
- <p id=${this.id + "--listing-header"}>[${this.settings.zIndex}]: ${this.name}</p>
- <p class="expandedMenuIndicator">-</p>
- </div>
- <div class="expandableMenu" style="display: block; margin: 0;" id=${this.id + "-settings-menu"}>
+ <div class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">
+ <p id=${this.id + "--listing-header"}>[${this.settings.zIndex}]: ${this.name}</p>
+ <p class="expandedMenuIndicator">-</p>
+ </div>
+ <div class="expandableMenu" style="display: block; margin: 0;" id=${this.id + "-settings-menu"}>
- <div class="renameAndClone">
- <div>
- <input id=${this.id + "--rename-input"} placeholder="new name here" />
- <button id=${this.id + "--rename-button"} onclick="renameContainer(this)">rename layer</button>
+ <div class="renameAndClone">
+ <div>
+ <input id=${this.id + "--rename-input"} placeholder="new name here" />
+ <button id=${this.id + "--rename-button"} onclick="renameContainer(this)">rename layer</button>
+ </div>
+ <button id=${this.id + "--clone-button"} onclick="cloneContainer(this)">clone layer</button>
</div>
- <button id=${this.id + "--clone-button"} onclick="cloneContainer(this)">clone layer</button>
- </div>
- <hr />
+ <hr />
- ${this.youtubeId ? `` : imageHyperlinkOptions}
+ ${this.youtubeId ? `` : imageHyperlinkOptions}
- <p class="menuHeader">shape</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-border-radius"}>roundness: </label>
- <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
- </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-rotation"}>rotation: </label>
- <input id=${this.id + "-settings-rotation"} type="range" min="-360" max="360" />
- </div>
-
- <p class="menuHeader">border</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-border-color"}>set border color: </label>
- <input id=${this.id + "-settings-border-color"} type="color" />
- </div>
+ <p class="menuHeader">shape</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-border-radius"}>roundness: </label>
+ <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
+ </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-rotation"}>rotation: </label>
+ <input id=${this.id + "-settings-rotation"} type="range" min="-360" max="360" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-border-width"}>set border width: </label>
- <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
- </div>
+ <p class="menuHeader">border</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-border-color"}>set border color: </label>
+ <input id=${this.id + "-settings-border-color"} type="color" />
+ </div>
- <p class="menuHeader">shadow / glow</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
- <input id=${this.id + "-settings-shadow-color"} type="color" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-border-width"}>set border width: </label>
+ <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
+ </div>
- <div class="containerOptionListing">
- <label>shadow opacity:</label>
- <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
- </div>
+ <p class="menuHeader">shadow / glow</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
+ <input id=${this.id + "-settings-shadow-color"} type="color" />
+ </div>
- <br />
+ <div class="containerOptionListing">
+ <label>shadow opacity:</label>
+ <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
- <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
- </div>
+ <br />
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
- <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
+ <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
+ </div>
- <br />
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
+ <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
+ </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
- <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
- </div>
-
- <p class="menuHeader">mirroring</p>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-mirror-x"}>mirror horizontally</label>
- <input id=${this.id + "-settings-mirror-x"} type="checkbox" />
- </div>
- <div class="containerOptionListing">
- <label for=${this.id + "-settings-mirror-y"}>mirror vertically</label>
- <input id=${this.id + "-settings-mirror-y"} type="checkbox" />
- </div>
+ <br />
- ${this.youtubeId ? youtubeEmbedOptions : ``}
- </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
+ <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
+ </div>
+
+ <p class="menuHeader">mirroring</p>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-mirror-x"}>mirror horizontally</label>
+ <input id=${this.id + "-settings-mirror-x"} type="checkbox" />
+ </div>
+ <div class="containerOptionListing">
+ <label for=${this.id + "-settings-mirror-y"}>mirror vertically</label>
+ <input id=${this.id + "-settings-mirror-y"} type="checkbox" />
+ </div>
- <div class="manageButtons">
- <div id=${this.id + "--manage-buttons"}>
- ${zindex == numberTotalContainers ? `` : upButtons}
- ${zindex == 1 ? `` : downButtons}
+ ${this.youtubeId ? youtubeEmbedOptions : ``}
</div>
- <div>
- <button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete layer</button>
+
+ <div class="manageButtons">
+ <div id=${this.id + "--manage-buttons"}>
+ ${zindex == numberTotalContainers ? `` : upButtons}
+ ${zindex == 1 ? `` : downButtons}
+ </div>
+ <div>
+ <button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete layer</button>
+ </div>
</div>
</div>
- </div>
- `
- );
-
- /** fill in inputs with current values */
- let settings = this.settings;
- // SHADOW / GLOW
- document.getElementById(this.id + "-settings-shadow-x").value =
- settings.shadowX;
- document.getElementById(this.id + "-settings-shadow-y").value =
- settings.shadowY;
- document.getElementById(this.id + "-settings-shadow-blur").value =
- settings.shadowBlur;
- document.getElementById(this.id + "-settings-shadow-color").value =
- rgbToHex(
+ `
+ );
+
+ /** fill in inputs with current values */
+ let settings = this.settings;
+ // SHADOW / GLOW
+ document.getElementById(this.id + "-settings-shadow-x").value =
+ settings.shadowX;
+ document.getElementById(this.id + "-settings-shadow-y").value =
+ settings.shadowY;
+ document.getElementById(this.id + "-settings-shadow-blur").value =
+ settings.shadowBlur;
+ document.getElementById(this.id + "-settings-shadow-color").value =
+ rgbToHex(
+ settings.shadowRgba
+ .replace("rgba(", "")
+ .slice(0, -1)
+ .split(",")
+ .splice(0, 3)
+ );
+ document.getElementById(this.id + "-settings-shadow-alpha").value =
settings.shadowRgba
.replace("rgba(", "")
.slice(0, -1)
- .split(",")
- .splice(0, 3)
- );
- document.getElementById(this.id + "-settings-shadow-alpha").value =
- settings.shadowRgba
- .replace("rgba(", "")
- .slice(0, -1)
- .split(",")[3] * 100;
- // BORDER
- document.getElementById(this.id + "-settings-border-color").value =
- settings.borderColor;
- document.getElementById(this.id + "-settings-border-width").value =
- settings.borderWidth;
- document.getElementById(this.id + "-settings-border-radius").value =
- settings.borderRadius;
- // ROTATION
- document.getElementById(this.id + "-settings-rotation").value =
- settings.rotation;
- // MIRRORING
- document.getElementById(this.id + "-settings-mirror-x").checked =
- settings.invertX;
- document.getElementById(this.id + "-settings-mirror-y").checked =
- settings.invertY;
- }
-
- /**
- * applies event listeners on container options inputs in settings menu (both text+media containers)
- */
- addSettingsMenuEventListeners() {
- /** apply listeners for both text+media containers */
- // container border setting listeners
- document
- .getElementById(this.id + "-settings-border-color")
- .addEventListener("input", changeContainerBorderColor, false);
- document
- .getElementById(this.id + "-settings-border-width")
- .addEventListener("input", changeContainerBorderWidth, false);
- document
- .getElementById(this.id + "-settings-border-radius")
- .addEventListener("input", changeContainerBorderRadius, false); // container color setting listeners
- // container shadow setting listeners
- document
- .getElementById(this.id + "-settings-shadow-x")
- .addEventListener("input", changeContainerShadow, false);
- document
- .getElementById(this.id + "-settings-shadow-y")
- .addEventListener("input", changeContainerShadow, false);
- document
- .getElementById(this.id + "-settings-shadow-blur")
- .addEventListener("input", changeContainerShadow, false);
- document
- .getElementById(this.id + "-settings-shadow-color")
- .addEventListener("input", changeContainerShadow, false);
- document
- .getElementById(this.id + "-settings-shadow-alpha")
- .addEventListener("input", changeContainerShadow, false);
- // container rotation setting listeners
- document
- .getElementById(this.id + "-settings-rotation")
- .addEventListener("input", changeContainerRotation, false);
-
- /** if this is an media container, settings diverge here */
- if (this.mediaUrl != undefined) {
- document
- .getElementById(this.id + "-settings-mirror-x")
- .addEventListener("change", toggleMirrorX, false);
- document
- .getElementById(this.id + "-settings-mirror-y")
- .addEventListener("change", toggleMirrorY, false);
- return;
- }
-
- /** text-only settings */
- // container background color setting listeners
- document
- .getElementById(this.id + "-settings-bg-color")
- .addEventListener("input", changeContainerBackground, false);
- document
- .getElementById(this.id + "-settings-bg-alpha")
- .addEventListener("input", changeContainerBackground, false);
- // container text setting listeners
- document
- .getElementById(this.id + "-settings-set-font-button")
- .addEventListener("click", changeFont, false);
- document
- .getElementById(this.id + "-settings-left-align")
- .addEventListener("change", changeContainerAlignment, false);
- document
- .getElementById(this.id + "-settings-center-align")
- .addEventListener("change", changeContainerAlignment, false);
- document
- .getElementById(this.id + "-settings-right-align")
- .addEventListener("change", changeContainerAlignment, false);
-
- // bookmark section setting listeners
- document
- .getElementById(this.id + "-settings-section-color")
- .addEventListener("input", changeSectionColor, false);
- document
- .getElementById(this.id + "-settings-section-size")
- .addEventListener("input", changeSectionSize, false);
- document
- .getElementById(this.id + "-settings-section-bold")
- .addEventListener("change", toggleSectionBold, false);
- document
- .getElementById(this.id + "-settings-section-italic")
- .addEventListener("change", toggleSectionItalic, false);
- // bookmark setting listeners
- document
- .getElementById(this.id + "-settings-link-color")
- .addEventListener("input", changeLinkColor, false);
- document
- .getElementById(this.id + "-settings-link-size")
- .addEventListener("input", changeLinkSize, false);
- document
- .getElementById(this.id + "-settings-link-decor")
- .addEventListener("change", toggleLinkDecor, false);
- document
- .getElementById(this.id + "-settings-link-bold")
- .addEventListener("change", toggleLinkBold, false);
- document
- .getElementById(this.id + "-settings-link-italic")
- .addEventListener("change", toggleLinkItalic, false);
- // clock setting listeners
- document
- .getElementById(this.id + "-settings-date-toggle")
- .addEventListener("input", toggleDate, false);
- document
- .getElementById(this.id + "-settings-clock-toggle")
- .addEventListener("input", toggleClock, false);
- document
- .getElementById(this.id + "-settings-clock-color")
- .addEventListener("input", changeHeaderColor, false);
- document
- .getElementById(this.id + "-settings-clock-size")
- .addEventListener("input", changeHeaderSize, false);
- document
- .getElementById(this.id + "-settings-date-bold")
- .addEventListener("change", toggleDateBold, false);
- document
- .getElementById(this.id + "-settings-clock-bold")
- .addEventListener("change", toggleClockBold, false);
- document
- .getElementById(this.id + "-settings-date-italic")
- .addEventListener("change", toggleDateItalic, false);
- document
- .getElementById(this.id + "-settings-clock-italic")
- .addEventListener("change", toggleClockItalic, false);
- // container divider setting listeners
- document
- .getElementById(this.id + "-settings-divider-toggle")
- .addEventListener("change", toggleDivider, false);
- document
- .getElementById(this.id + "-settings-divider-color")
- .addEventListener("input", changeDividerColor, false);
- }
-
- /*
- * applies saved cosmetic customizations to container upon init (both text+media containers)
- */
- applySettings() {
- /** apply customizations relevant to both image and text containers */
- /** POSITION */
- document.getElementById(this.id).style.top = this.y;
- document.getElementById(this.id).style.left = this.x;
- document.getElementById(this.id).style.zIndex = this.settings.zIndex;
-
- /** SIZE */
- let settings = this.settings;
- document.getElementById(this.id).style.width = this.width + "px";
- // this.width - 2 * parseInt(settings.borderWidth);
- document.getElementById(this.id).style.height = this.height + "px";
- // this.height - 2 * parseInt(settings.borderWidth);
-
- /** SHADOW / GLOW */
- document.getElementById(this.id).style.boxShadow =
- settings.shadowX +
- "px " +
- settings.shadowY +
- "px " +
- settings.shadowBlur +
- "px " +
- settings.shadowRgba;
-
-
- /**
- * if this is a media container, settings diverge here
- */
-
- /** BORDER */
- if (this.mediaUrl?.includes("youtube.com") || this.mediaUrl?.includes("youtu.be")) {
- // apply border to iframe and cover element rather than containing div
- document.getElementById(this.id).children[0].style.borderColor =
+ .split(",")[3] * 100;
+ // BORDER
+ document.getElementById(this.id + "-settings-border-color").value =
settings.borderColor;
- document.getElementById(this.id).children[1].style.borderColor =
- settings.borderColor;
- document.getElementById(this.id).children[0].style.borderWidth =
- settings.borderWidth + "px";
- document.getElementById(this.id).children[1].style.borderWidth =
- settings.borderWidth + "px";
- document.getElementById(this.id).children[0].style.borderRadius =
- settings.borderRadius + "px";
- document.getElementById(this.id).children[1].style.borderRadius =
- settings.borderRadius + "px";
+ document.getElementById(this.id + "-settings-border-width").value =
+ settings.borderWidth;
+ document.getElementById(this.id + "-settings-border-radius").value =
+ settings.borderRadius;
+ // ROTATION
+ document.getElementById(this.id + "-settings-rotation").value =
+ settings.rotation;
+ // MIRRORING
+ document.getElementById(this.id + "-settings-mirror-x").checked =
+ settings.invertX;
+ document.getElementById(this.id + "-settings-mirror-y").checked =
+ settings.invertY;
}
- else {
- document.getElementById(this.id).style.borderRadius =
- settings.borderRadius + "px";
- document.getElementById(this.id).style.borderStyle = "solid";
- document.getElementById(this.id).style.borderWidth =
- settings.borderWidth + "px";
- document.getElementById(this.id).style.borderColor =
- settings.borderColor;
- }
+
+ /**
+ * applies event listeners on container options inputs in settings menu (both text+media containers)
+ */
+ addSettingsMenuEventListeners() {
+ /** apply listeners for both text+media containers */
+ // container border setting listeners
+ document
+ .getElementById(this.id + "-settings-border-color")
+ .addEventListener("input", changeContainerBorderColor, false);
+ document
+ .getElementById(this.id + "-settings-border-width")
+ .addEventListener("input", changeContainerBorderWidth, false);
+ document
+ .getElementById(this.id + "-settings-border-radius")
+ .addEventListener("input", changeContainerBorderRadius, false); // container color setting listeners
+ // container shadow setting listeners
+ document
+ .getElementById(this.id + "-settings-shadow-x")
+ .addEventListener("input", changeContainerShadow, false);
+ document
+ .getElementById(this.id + "-settings-shadow-y")
+ .addEventListener("input", changeContainerShadow, false);
+ document
+ .getElementById(this.id + "-settings-shadow-blur")
+ .addEventListener("input", changeContainerShadow, false);
+ document
+ .getElementById(this.id + "-settings-shadow-color")
+ .addEventListener("input", changeContainerShadow, false);
+ document
+ .getElementById(this.id + "-settings-shadow-alpha")
+ .addEventListener("input", changeContainerShadow, false);
+ // container rotation setting listeners
+ document
+ .getElementById(this.id + "-settings-rotation")
+ .addEventListener("input", changeContainerRotation, false);
- /** MEDIA MIRRORING + ROTATOIN*/
- if (this.mediaUrl != undefined) {
- let transformValue =
- `scale(${settings.invertX ? `-1` : `1`}, ${settings.invertY ? `-1` : `1`}) `;
- transformValue +=
- `rotate(${settings.rotation}deg)`;
+ /** if this is an media container, settings diverge here */
+ if (this.mediaUrl != undefined) {
+ document
+ .getElementById(this.id + "-settings-mirror-x")
+ .addEventListener("change", toggleMirrorX, false);
+ document
+ .getElementById(this.id + "-settings-mirror-y")
+ .addEventListener("change", toggleMirrorY, false);
+ return;
+ }
- document.getElementById(this.id).style.transform = transformValue;
- return;
- }
-
- /** apply text-container-only customizations */
+ /** text-only settings */
+ // container background color setting listeners
+ document
+ .getElementById(this.id + "-settings-bg-color")
+ .addEventListener("input", changeContainerBackground, false);
+ document
+ .getElementById(this.id + "-settings-bg-alpha")
+ .addEventListener("input", changeContainerBackground, false);
+ // container text setting listeners
+ document
+ .getElementById(this.id + "-settings-set-font-button")
+ .addEventListener("click", changeFont, false);
+ document
+ .getElementById(this.id + "-settings-left-align")
+ .addEventListener("change", changeContainerAlignment, false);
+ document
+ .getElementById(this.id + "-settings-center-align")
+ .addEventListener("change", changeContainerAlignment, false);
+ document
+ .getElementById(this.id + "-settings-right-align")
+ .addEventListener("change", changeContainerAlignment, false);
-
- /** FONT */
- if (settings.fontCode != "") {
- document.head.insertAdjacentHTML(
- "beforeend",
- settings.fontCode
- );
- document.getElementById(this.id).style.fontFamily =
- settings.fontName;
+ // bookmark section setting listeners
+ document
+ .getElementById(this.id + "-settings-section-color")
+ .addEventListener("input", changeSectionColor, false);
+ document
+ .getElementById(this.id + "-settings-section-size")
+ .addEventListener("input", changeSectionSize, false);
+ document
+ .getElementById(this.id + "-settings-section-bold")
+ .addEventListener("change", toggleSectionBold, false);
+ document
+ .getElementById(this.id + "-settings-section-italic")
+ .addEventListener("change", toggleSectionItalic, false);
+ // bookmark setting listeners
+ document
+ .getElementById(this.id + "-settings-link-color")
+ .addEventListener("input", changeLinkColor, false);
+ document
+ .getElementById(this.id + "-settings-link-size")
+ .addEventListener("input", changeLinkSize, false);
+ document
+ .getElementById(this.id + "-settings-link-decor")
+ .addEventListener("change", toggleLinkDecor, false);
+ document
+ .getElementById(this.id + "-settings-link-bold")
+ .addEventListener("change", toggleLinkBold, false);
+ document
+ .getElementById(this.id + "-settings-link-italic")
+ .addEventListener("change", toggleLinkItalic, false);
+ // clock setting listeners
+ document
+ .getElementById(this.id + "-settings-date-toggle")
+ .addEventListener("input", toggleDate, false);
+ document
+ .getElementById(this.id + "-settings-clock-toggle")
+ .addEventListener("input", toggleClock, false);
+ document
+ .getElementById(this.id + "-settings-clock-color")
+ .addEventListener("input", changeHeaderColor, false);
+ document
+ .getElementById(this.id + "-settings-clock-size")
+ .addEventListener("input", changeHeaderSize, false);
+ document
+ .getElementById(this.id + "-settings-date-bold")
+ .addEventListener("change", toggleDateBold, false);
+ document
+ .getElementById(this.id + "-settings-clock-bold")
+ .addEventListener("change", toggleClockBold, false);
+ document
+ .getElementById(this.id + "-settings-date-italic")
+ .addEventListener("change", toggleDateItalic, false);
+ document
+ .getElementById(this.id + "-settings-clock-italic")
+ .addEventListener("change", toggleClockItalic, false);
+ // container divider setting listeners
+ document
+ .getElementById(this.id + "-settings-divider-toggle")
+ .addEventListener("change", toggleDivider, false);
+ document
+ .getElementById(this.id + "-settings-divider-color")
+ .addEventListener("input", changeDividerColor, false);
}
+
+ /*
+ * applies saved cosmetic customizations to container upon init (both text+media containers)
+ */
+ applySettings() {
+ /** apply customizations relevant to both image and text containers */
+ /** POSITION */
+ document.getElementById(this.id).style.top = this.y;
+ document.getElementById(this.id).style.left = this.x;
+ document.getElementById(this.id).style.zIndex = this.settings.zIndex;
+
+ /** SIZE */
+ let settings = this.settings;
+ document.getElementById(this.id).style.width = this.width + "px";
+ // this.width - 2 * parseInt(settings.borderWidth);
+ document.getElementById(this.id).style.height = this.height + "px";
+ // this.height - 2 * parseInt(settings.borderWidth);
- /** TEXT ALIGNMENT */
- if (settings.textAlign == "center") {
- document.getElementById(this.id).style.textAlign = "center";
- } else if (settings.textAlign == "left") {
- document.getElementById(this.id).style.textAlign = "left";
- } else if (settings.textAlign == "right") {
- document.getElementById(this.id).style.textAlign = "right";
- }
+ /** SHADOW / GLOW */
+ document.getElementById(this.id).style.boxShadow =
+ settings.shadowX +
+ "px " +
+ settings.shadowY +
+ "px " +
+ settings.shadowBlur +
+ "px " +
+ settings.shadowRgba;
- /** BOOKMARK CUSTOMIZATION HAPPENS IN loadBookmarks() FOR EASIER,
- LESS INTENSE RE-RENDERING WHEN BOOKMARK CUSTOMIZATIONS CHANGE */
+
+ /**
+ * if this is a media container, settings diverge here
+ */
- /** BACKGROUND COLOR */
- document.getElementById(this.id).style.backgroundColor =
- settings.backgroundRgba;
+ /** BORDER */
+ if (this.mediaUrl?.includes("youtube.com") || this.mediaUrl?.includes("youtu.be")) {
+ // apply border to iframe and cover element rather than containing div
+ document.getElementById(this.id).children[0].style.borderColor =
+ settings.borderColor;
+ document.getElementById(this.id).children[1].style.borderColor =
+ settings.borderColor;
+ document.getElementById(this.id).children[0].style.borderWidth =
+ settings.borderWidth + "px";
+ document.getElementById(this.id).children[1].style.borderWidth =
+ settings.borderWidth + "px";
+ document.getElementById(this.id).children[0].style.borderRadius =
+ settings.borderRadius + "px";
+ document.getElementById(this.id).children[1].style.borderRadius =
+ settings.borderRadius + "px";
+ }
+ else {
+ document.getElementById(this.id).style.borderRadius =
+ settings.borderRadius + "px";
+ document.getElementById(this.id).style.borderStyle = "solid";
+ document.getElementById(this.id).style.borderWidth =
+ settings.borderWidth + "px";
+ document.getElementById(this.id).style.borderColor =
+ settings.borderColor;
+ }
- /** HEADER */
- // show header elements
- document.getElementById(this.id + "-date").style.display =
- settings.enableDate ? "inline" : "none";
- document.getElementById(this.id + "-clock").style.display =
- settings.enableClock ? "inline" : "none";
- // apply text customizations
- document.getElementById(this.id + "-header").style.color =
- settings.headerColor;
- document.getElementById(this.id + "-header").style.fontSize =
- settings.headerSize + "px";
- document.getElementById(this.id + "-date").style.fontWeight =
- settings.dateBold ? "bold" : "normal";
- document.getElementById(this.id + "-clock").style.fontWeight =
- settings.clockBold ? "bold" : "normal";
- document.getElementById(this.id + "-date").style.fontStyle =
- settings.dateItalic ? "italic" : "normal";
- document.getElementById(this.id + "-clock").style.fontStyle =
- settings.clockItalic ? "italic" : "normal";
+ /** MEDIA MIRRORING + ROTATOIN*/
+ if (this.mediaUrl != undefined) {
+ let transformValue =
+ `scale(${settings.invertX ? `-1` : `1`}, ${settings.invertY ? `-1` : `1`}) `;
+ transformValue +=
+ `rotate(${settings.rotation}deg)`;
- /** DIVIDER */
- let divider = document.getElementById(this.id + "-divider");
- if (!settings.enableDivider) {
- document.getElementById(this.id + "-divider").hidden = true;
- // if there are links in this container, add room under the divider
- if (Object.keys(this.sections).length > 0) {
- document.getElementById(this.id + "-header").style.marginBottom =
- "18px";
+ document.getElementById(this.id).style.transform = transformValue;
+ return;
}
- } else {
- divider.style.color = settings.dividerColor;
- divider.style.backgroundColor = settings.dividerColor;
- divider.style.borderColor = settings.dividerColor;
- }
+
+ /** apply text-container-only customizations */
- /** ROTATION */
- document.getElementById(this.id).style.transform =
- "rotate(" + settings.rotation + "deg)";
-
- }
+
+ /** FONT */
+ if (settings.fontCode != "") {
+ document.head.insertAdjacentHTML(
+ "beforeend",
+ settings.fontCode
+ );
+ document.getElementById(this.id).style.fontFamily =
+ settings.fontName;
+ }
- /**
- * applies event listeners (moving/resizing) for the container
- */
- addContainerEventListeners() {
- let container = document.getElementById(this.id);
+ /** TEXT ALIGNMENT */
+ if (settings.textAlign == "center") {
+ document.getElementById(this.id).style.textAlign = "center";
+ } else if (settings.textAlign == "left") {
+ document.getElementById(this.id).style.textAlign = "left";
+ } else if (settings.textAlign == "right") {
+ document.getElementById(this.id).style.textAlign = "right";
+ }
- // make element movable + resizable
- container.addEventListener(
- "mousedown",
- mouseDownMovableElement,
- true
- );
+ /** BOOKMARK CUSTOMIZATION HAPPENS IN loadBookmarks() FOR EASIER,
+ LESS INTENSE RE-RENDERING WHEN BOOKMARK CUSTOMIZATIONS CHANGE */
- container.addEventListener(
- "keydown",
- keyDownMovableElement,
- false
- );
+ /** BACKGROUND COLOR */
+ document.getElementById(this.id).style.backgroundColor =
+ settings.backgroundRgba;
- container.addEventListener("contextmenu", (e) => {
- e.preventDefault();
- });
+ /** HEADER */
+ // show header elements
+ document.getElementById(this.id + "-date").style.display =
+ settings.enableDate ? "inline" : "none";
+ document.getElementById(this.id + "-clock").style.display =
+ settings.enableClock ? "inline" : "none";
+ // apply text customizations
+ document.getElementById(this.id + "-header").style.color =
+ settings.headerColor;
+ document.getElementById(this.id + "-header").style.fontSize =
+ settings.headerSize + "px";
+ document.getElementById(this.id + "-date").style.fontWeight =
+ settings.dateBold ? "bold" : "normal";
+ document.getElementById(this.id + "-clock").style.fontWeight =
+ settings.clockBold ? "bold" : "normal";
+ document.getElementById(this.id + "-date").style.fontStyle =
+ settings.dateItalic ? "italic" : "normal";
+ document.getElementById(this.id + "-clock").style.fontStyle =
+ settings.clockItalic ? "italic" : "normal";
- // stop resizing element if cursor leaves page
- document.addEventListener("mouseleave", (mouseLeave) => {
- if (resizing) {
- resizing = false;
- document.removeEventListener("mousemove", resizeElement);
- storeElementData();
+ /** DIVIDER */
+ let divider = document.getElementById(this.id + "-divider");
+ if (!settings.enableDivider) {
+ document.getElementById(this.id + "-divider").hidden = true;
+ // if there are links in this container, add room under the divider
+ if (Object.keys(this.sections).length > 0 &&
+ (settings.enableDate || settings.enableClock)
+ ) {
+ document.getElementById(this.id + "-header").style.marginBottom =
+ "18px";
+ }
+ } else {
+ divider.style.color = settings.dividerColor;
+ divider.style.backgroundColor = settings.dividerColor;
+ divider.style.borderColor = settings.dividerColor;
}
- });
- }
-
- /**
- * [re]renders saved bookmark sections + links for container
- */
- loadBookmarks() {
- if (Object.keys(this.sections).length == 0) {
- let containerBookmarks = document.getElementById(this.id + "-bookmarks");
- containerBookmarks.innerHTML = "";
- return;
+ /** ROTATION */
+ document.getElementById(this.id).style.transform =
+ "rotate(" + settings.rotation + "deg)";
+
}
- let sectionData = Object.values(this.sections);
- let settings = this.settings;
+ /**
+ * applies event listeners (moving/resizing) for the container
+ */
+ addContainerEventListeners() {
+ let container = document.getElementById(this.id);
- let containerBookmarks = document.getElementById(this.id + "-bookmarks");
-
- containerBookmarks.innerHTML = "";
- for (let i = 0; i < sectionData.length; i++) {
- containerBookmarks.insertAdjacentHTML(
- "beforeend",
- `
- ${i == 0 ? "" : `<br />`}
- <div id="${this.id}-section-${i}">
-
- <span class=${this.id + "-section"}>
- ${sectionData[i].label}
- </span>
+ // make element movable + resizable
+ container.addEventListener(
+ "mousedown",
+ mouseDownMovableElement,
+ true
+ );
- </div>
- `
+ container.addEventListener(
+ "keydown",
+ keyDownMovableElement,
+ false
);
+
+ container.addEventListener("contextmenu", (e) => {
+ e.preventDefault();
+ });
+
+ // stop resizing element if cursor leaves page
+ document.addEventListener("mouseleave", (mouseLeave) => {
+ if (resizing) {
+ resizing = false;
+ document.removeEventListener("mousemove", resizeElement);
+ storeElementData();
+ }
+ });
}
- // and then render the links
- for (let s = 0; s < sectionData.length; s++) {
- for (let l = 0; l < sectionData[s].links.length; l++) {
- let targetSection = document.getElementById(
- this.id + "-section-" + s
- );
+
+ /**
+ * [re]renders saved bookmark sections + links for container
+ */
+ loadBookmarks() {
+ if (Object.keys(this.sections).length == 0) {
+ let containerBookmarks = document.getElementById(this.id + "-bookmarks");
+ containerBookmarks.innerHTML = "";
+ return;
+ }
- targetSection.insertAdjacentHTML(
+ let sectionData = Object.values(this.sections);
+ let settings = this.settings;
+
+ let containerBookmarks = document.getElementById(this.id + "-bookmarks");
+
+ containerBookmarks.innerHTML = "";
+ for (let i = 0; i < sectionData.length; i++) {
+ containerBookmarks.insertAdjacentHTML(
"beforeend",
`
- <div id="${this.id}-section-${s}-link-${l}" >
+ ${i == 0 ? "" : `<br />`}
+ <div id="${this.id}-section-${i}">
+
+ <span class=${this.id + "-section"}>
+ ${sectionData[i].label}
+ </span>
- <a
- class="${this.id}-link"
- href="${sectionData[s].links[l].url}"
- >
- ${sectionData[s].links[l].label}
- </a>
</div>
`
);
}
- }
- // ensure smooth ux when rerendering
- if (!settings.enableDivider) {
- document.getElementById(this.id + "-header").style.marginBottom = "18px";
- }
+ // and then render the links
+ for (let s = 0; s < sectionData.length; s++) {
+ for (let l = 0; l < sectionData[s].links.length; l++) {
+ let targetSection = document.getElementById(
+ this.id + "-section-" + s
+ );
- // apply link customization
- let linkElements = document.getElementsByClassName(this.id + "-link");
- for (let i = 0; i < linkElements.length; i++) {
- linkElements[i].style.color = settings.linkColor;
- linkElements[i].style.fontSize = settings.linkSize + "px";
- linkElements[i].style.textDecoration = settings.linkDecor ?
- "underline" : "none";
- linkElements[i].style.fontWeight = settings.linkBold ?
- "bold" : "normal";
- linkElements[i].style.fontStyle = settings.linkItalic ?
- "italic" : "normal";
- }
- // apply section customization
- let sectionElements = document.getElementsByClassName(this.id + "-section");
- for (let i = 0; i < sectionElements.length; i++) {
- sectionElements[i].style.color = settings.sectionColor;
- sectionElements[i].style.fontSize = settings.sectionSize + "px";
- sectionElements[i].style.fontWeight = settings.sectionBold ? "bold" : "normal";
- sectionElements[i].style.fontStyle = settings.sectionItalic ? "italic" : "normal";
+ targetSection.insertAdjacentHTML(
+ "beforeend",
+ `
+ <div id="${this.id}-section-${s}-link-${l}"
+ ${l < sectionData[s].links.length - 1 ?
+ `style="margin-bottom: .5rem"` :
+ `style="margin-bottom: 5px"`}
+ >
+
+ <a
+ class="${this.id}-link"
+ href="${sectionData[s].links[l].url}"
+
+ >
+ ${sectionData[s].links[l].label}
+ </a>
+ </div>
+ `
+ );
+ }
+ }
+
+ // ensure smooth ux when rerendering
+ if (!settings.enableDivider &&
+ (settings.enableDate || settings.enableClock)
+ ) {
+ document.getElementById(this.id + "-header").style.marginBottom = "18px";
+ }
+
+ // apply link customization
+ let linkElements = document.getElementsByClassName(this.id + "-link");
+ for (let i = 0; i < linkElements.length; i++) {
+ linkElements[i].style.color = settings.linkColor;
+ linkElements[i].style.fontSize = settings.linkSize + "px";
+ linkElements[i].style.textDecoration = settings.linkDecor ?
+ "underline" : "none";
+ linkElements[i].style.fontWeight = settings.linkBold ?
+ "bold" : "normal";
+ linkElements[i].style.fontStyle = settings.linkItalic ?
+ "italic" : "normal";
+ }
+ // apply section customization
+ let sectionElements = document.getElementsByClassName(this.id + "-section");
+ for (let i = 0; i < sectionElements.length; i++) {
+ sectionElements[i].style.color = settings.sectionColor;
+ sectionElements[i].style.fontSize = settings.sectionSize + "px";
+ sectionElements[i].style.fontWeight = settings.sectionBold ? "bold" : "normal";
+ sectionElements[i].style.fontStyle = settings.sectionItalic ? "italic" : "normal";
+ }
}
+
}
-
- }
- /******************************
- * page constructor / init :p *
- ******************************/
- (() => {
- console.log("========== if you're looking in here because something is broken, reset the page with the `localStorage.clear()` command. that should fix everything");
- window.onbeforeunload = unloadPage;
-
- /** add keybinds */
- document.body.addEventListener("keydown", (e) => {
- if (e.key == "e" && !editing) {
- toggleEditMode();
+ /******************************
+ * page constructor / init :p *
+ ******************************/
+ (() => {
+ console.log("========== if you're looking in here because something is broken, reset the page with the `localStorage.clear()` command. that should fix everything");
+ window.onbeforeunload = unloadPage;
+
+ /** add keybinds */
+ document.body.addEventListener("keydown", (e) => {
+ if (e.key == "e" && !editing) {
+ toggleEditMode();
+ }
+ if (e.key == "Escape" && editing) {
+ toggleEditMode();
+ }
+ });
+
+ /** set edit mode toggle color */
+ editToggleRgba = localStorage.getItem("editToggleRgba")
+ || "rgba(0,0,0,1)";
+ document.getElementById("editToggle").style.color = editToggleRgba;
+ // fill in inputs with saved value
+ document.getElementById("edit-toggle-color").value =
+ rgbToHex(
+ editToggleRgba.replace("rgba(", "").slice(0, -1).split(",").splice(0, 3)
+ );
+ document.getElementById("edit-toggle-alpha").value =
+ parseInt(
+ editToggleRgba.replace("rgba(", "").slice(0, -1).split(",")[3]
+ ) * 100;
+ // set event listeners
+ document
+ .getElementById("edit-toggle-color")
+ .addEventListener("input", changeEditToggleColor, false);
+ document
+ .getElementById("edit-toggle-alpha")
+ .addEventListener("input", changeEditToggleColor, false);
+
+ /** set wallpaper */
+ wallpaper = JSON.parse(localStorage.getItem("wallpaper")) || "";
+ if (wallpaper.startsWith("#")) {
+ document.body.style.background = wallpaper;
+ document.getElementById("wallpaperColorPicker").value = wallpaper;
+ } else {
+ document.body.style.backgroundImage = "url('" + wallpaper + "')";
}
- if (e.key == "Escape" && editing) {
- toggleEditMode();
+ repeatWallpaper =
+ JSON.parse(localStorage.getItem("repeatWallpaper")) || false;
+ if (repeatWallpaper) {
+ document.body.style.backgroundSize = "contain";
+ document.getElementById("wallpaperRepeatToggle").checked = true;
+ } else {
+ document.body.style.backgroundSize = "cover";
+ document.body.style.backgroundPosition = "center";
}
- });
+ // set wallpaper event listeners
+ document
+ .getElementById("wallpaperColorPicker")
+ .addEventListener("input", changeWallpaper, false);
+ document
+ .getElementById("wallpaperRepeatToggle")
+ .addEventListener("change", toggleWallpaperRepeat, false);
- /** set edit mode toggle color */
- editToggleRgba = localStorage.getItem("editToggleRgba")
- || "rgba(0,0,0,1)";
- document.getElementById("editToggle").style.color = editToggleRgba;
- // fill in inputs with saved value
- document.getElementById("edit-toggle-color").value =
- rgbToHex(
- editToggleRgba.replace("rgba(", "").slice(0, -1).split(",").splice(0, 3)
- );
- document.getElementById("edit-toggle-alpha").value =
- parseInt(
- editToggleRgba.replace("rgba(", "").slice(0, -1).split(",")[3]
- ) * 100;
- // set event listeners
- document
- .getElementById("edit-toggle-color")
- .addEventListener("input", changeEditToggleColor, false);
- document
- .getElementById("edit-toggle-alpha")
- .addEventListener("input", changeEditToggleColor, false);
+ /* init audio + auto-play */
+ audioLink = JSON.parse(localStorage.getItem("audioLink")) || "";
+ document.getElementById("audioSource").src = audioLink;
+ autoplayAudio =
+ JSON.parse(localStorage.getItem("autoplayAudio")) || false;
+ document.getElementById("autoplayAudioToggle").checked = autoplayAudio;
+ if (audioLink != "" && autoplayAudio) {
+ document
+ .getElementById("audio")
+ .play()
+ .catch((error) => {
+ alert(
+ "auto-playing audio won't work unless you whitelist this page in your browser!"
+ );
+ });
+ }
+ // add event listeners
+ document
+ .getElementById("autoplayAudioToggle")
+ .addEventListener("change", toggleAutoplayAudio, false);
- /** set wallpaper */
- wallpaper = JSON.parse(localStorage.getItem("wallpaper")) || "";
- if (wallpaper.startsWith("#")) {
- document.body.style.background = wallpaper;
- document.getElementById("wallpaperColorPicker").value = wallpaper;
- } else {
- document.body.style.backgroundImage = "url('" + wallpaper + "')";
- }
- repeatWallpaper =
- JSON.parse(localStorage.getItem("repeatWallpaper")) || false;
- if (repeatWallpaper) {
- document.body.style.backgroundSize = "contain";
- document.getElementById("wallpaperRepeatToggle").checked = true;
- } else {
- document.body.style.backgroundSize = "cover";
- document.body.style.backgroundPosition = "center";
- }
- // set wallpaper event listeners
- document
- .getElementById("wallpaperColorPicker")
- .addEventListener("input", changeWallpaper, false);
- document
- .getElementById("wallpaperRepeatToggle")
- .addEventListener("change", toggleWallpaperRepeat, false);
- /* init audio + auto-play */
- audioLink = JSON.parse(localStorage.getItem("audioLink")) || "";
- document.getElementById("audioSource").src = audioLink;
- autoplayAudio =
- JSON.parse(localStorage.getItem("autoplayAudio")) || false;
- document.getElementById("autoplayAudioToggle").checked = autoplayAudio;
- if (audioLink != "" && autoplayAudio) {
- document
- .getElementById("audio")
- .play()
- .catch((error) => {
- alert(
- "auto-playing audio won't work unless you whitelist this page in your browser!"
- );
- });
- }
- // add event listeners
- document
- .getElementById("autoplayAudioToggle")
- .addEventListener("change", toggleAutoplayAudio, false);
+ /** load container data */
+ let zIndexMapData = JSON.parse(localStorage.getItem("zIndexMapData")) || [];
+ let zIndexMapKeys = Object.keys(zIndexMapData) || [];
+ for (let i = 0; i < zIndexMapKeys.length; i++) {
+ zIndexMap.set(
+ zIndexMapKeys[i],
+ zIndexMapData[zIndexMapKeys[i]]
+ );
+ }
+ let containerMapValues =
+ JSON.parse(localStorage.getItem("containerMapValues")) || [];
+ numberTotalContainers = containerMapValues.length;
+
+ for (let i = 0; i < numberTotalContainers; i++) {
+ containerDataMap.set(containerMapValues[i].id, new Container(
+ containerMapValues[i].id,
+ containerMapValues[i].name,
+ containerMapValues[i].x,
+ containerMapValues[i].y,
+ containerMapValues[i].height,
+ containerMapValues[i].width,
+ containerMapValues[i].mediaUrl,
+ containerMapValues[i].settings,
+ containerMapValues[i].sections,
+ containerMapValues[i].youtubeId,
+ containerMapValues[i].imageHyperlink
+ ));
+ }
- /** load container data */
- let zIndexMapData = JSON.parse(localStorage.getItem("zIndexMapData")) || [];
- let zIndexMapKeys = Object.keys(zIndexMapData) || [];
- for (let i = 0; i < zIndexMapKeys.length; i++) {
- zIndexMap.set(
- zIndexMapKeys[i],
- zIndexMapData[zIndexMapKeys[i]]
- );
- }
+
+ /** set up + load settings menu data */
+ settingsMenuData = JSON.parse(
+ localStorage.getItem("settingsMenuData")
+ ) || {
+ x: "",
+ y: "",
+ width: "",
+ height: "",
+ };
+ setupSettingsContainer();
+ // load last active settings tab user was on
+ activeTabId =
+ JSON.parse(localStorage.getItem("activeTabId")) || "helpTab";
+ document.getElementById(
+ activeTabId.replace("Tab", "Page")
+ ).style.display = "flex";
+ document.getElementById(activeTabId).classList.add("active");
+ // add tab-switching listeners
+ let tabs = document.getElementsByClassName("tab");
+ for (let i = 0; i < tabs.length; i++) {
+ tabs[i].addEventListener("click", changeActiveTab, false);
+ }
- let containerMapValues =
- JSON.parse(localStorage.getItem("containerMapValues")) || [];
- numberTotalContainers = containerMapValues.length;
-
- for (let i = 0; i < numberTotalContainers; i++) {
- containerDataMap.set(containerMapValues[i].id, new Container(
- containerMapValues[i].id,
- containerMapValues[i].name,
- containerMapValues[i].x,
- containerMapValues[i].y,
- containerMapValues[i].height,
- containerMapValues[i].width,
- containerMapValues[i].mediaUrl,
- containerMapValues[i].settings,
- containerMapValues[i].sections,
- containerMapValues[i].youtubeId,
- containerMapValues[i].imageHyperlink
- ));
- }
+ /** set up cursors */
+ cursors = JSON.parse(localStorage.getItem("cursors")) || {};
+ if (cursors != {}) {
+ // apply new default cursor to entire html document
+ document.getElementsByTagName("html")[0].style.cursor =
+ cursors.link ? 'url("' + cursors.default + '"), auto' : "";
+ // apply link hover cursor
+ let links = document.getElementsByTagName("a");
+ for (let i = 0; i < links.length; i++) {
+ links[i].style.cursor = cursors.link ? 'url("' + cursors.link + '"), pointer' : "pointer";
+ }
+ }
-
- /** set up + load settings menu data */
- settingsMenuData = JSON.parse(
- localStorage.getItem("settingsMenuData")
- ) || {
- x: "",
- y: "",
- width: "",
- height: "",
- };
- setupSettingsContainer();
- // load last active settings tab user was on
- activeTabId =
- JSON.parse(localStorage.getItem("activeTabId")) || "helpTab";
- document.getElementById(
- activeTabId.replace("Tab", "Page")
- ).style.display = "flex";
- document.getElementById(activeTabId).classList.add("active");
- // add tab-switching listeners
- let tabs = document.getElementsByClassName("tab");
- for (let i = 0; i < tabs.length; i++) {
- tabs[i].addEventListener("click", changeActiveTab, false);
- }
+ // lastly, set current state as download contents for export button
+ const exportData = new Blob([JSON.stringify(localStorage)], {type: 'text/plain'});
+ const url = window.URL.createObjectURL(exportData);
+ document.getElementById("export-button").href = url;
+ })();
- /** set up cursors */
- cursors = JSON.parse(localStorage.getItem("cursors")) || {};
- if (cursors != {}) {
- // apply new default cursor to entire html document
- document.getElementsByTagName("html")[0].style.cursor =
- cursors.link ? 'url("' + cursors.default + '"), auto' : "";
- // apply link hover cursor
- let links = document.getElementsByTagName("a");
- for (let i = 0; i < links.length; i++) {
- links[i].style.cursor = cursors.link ? 'url("' + cursors.link + '"), pointer' : "pointer";
+ /**************************
+ * INITIALIZATION HELPERS *
+ **************************/
+ function setupSettingsContainer() {
+ let settingsContainer = document.getElementById("settingsContainer");
+
+ if (numberTotalContainers == 0) {
+ document.getElementById("containers").insertAdjacentHTML(
+ "beforeend",
+ `<p id="noContainerWarning" style="text-align: center">(you have no layers right now)</p>`
+ );
}
- }
- // lastly, set current state as download contents for export button
- const exportData = new Blob([JSON.stringify(localStorage)], {type: 'text/plain'});
- const url = window.URL.createObjectURL(exportData);
- document.getElementById("export-button").href = url;
- })();
+ // render listings of existing containers in menu, in order of z-index
+ for (let i = 1; i <= numberTotalContainers; i++) {
+ let currentContainer = containerDataMap.get(zIndexMap.get(String(i)));
+ if (currentContainer.mediaUrl == undefined) {
+ currentContainer.createTextContainerMenuListing();
+ currentContainer.loadBookmarkListings();
+ }
+ else {
+ currentContainer.createMediaContainerMenuListing();
+ }
+ currentContainer.addSettingsMenuEventListeners();
+ }
- /**************************
- * INITIALIZATION HELPERS *
- **************************/
- function setupSettingsContainer() {
- let settingsContainer = document.getElementById("settingsContainer");
+ /* place settings container at the last saved location */
+ settingsContainer.style.top = settingsMenuData.y;
+ settingsContainer.style.left = settingsMenuData.x;
+ settingsContainer.style.width = settingsMenuData.width + "px";
+ settingsContainer.style.height = settingsMenuData.height + "px";
- if (numberTotalContainers == 0) {
- document.getElementById("containers").insertAdjacentHTML(
- "beforeend",
- `<p id="noContainerWarning" style="text-align: center">(you have no layers right now)</p>`
+ /* add event listeners */
+ // moving / resizing
+ settingsContainer.addEventListener(
+ "mousedown",
+ mouseDownMovableElement,
+ true
);
+ // local state inputs
+ document.getElementById("imageRatioToggle").checked = !keepImageRatio;
+ document
+ .getElementById("imageRatioToggle")
+ .addEventListener("change", toggleImageRatio, false);
+
+
+ // prevent context menu when resizing
+ settingsContainer.addEventListener("contextmenu", (e) => {
+ e.preventDefault();
+ });
+
+ // stop resizing element if cursor leaves page
+ document.addEventListener("mouseleave", (mouseLeave) => {
+ if (resizing) {
+ resizing = false;
+ document.removeEventListener("mousemove", resizeElement);
+ storeElementData();
+ }
+ });
}
- // render listings of existing containers in menu, in order of z-index
- for (let i = 1; i <= numberTotalContainers; i++) {
- let currentContainer = containerDataMap.get(zIndexMap.get(String(i)));
- if (currentContainer.mediaUrl == undefined) {
- currentContainer.createTextContainerMenuListing();
- currentContainer.loadBookmarkListings();
+ /************************
+ * LOCAL STATE MANAGERS *
+ ************************/
+
+ /** primary event handler for toggling page editing */
+ function toggleEditMode() {
+ // enable editing mode (reveal hidden elements)
+ if (editing == false) {
+ editing = true;
+ toggleEditingElements(true);
}
+ // disable editing mode + save element data
else {
- currentContainer.createMediaContainerMenuListing();
- }
- currentContainer.addSettingsMenuEventListeners();
- }
+ editing = false;
+ toggleEditingElements(false);
+ document.getElementById("editToggle").innerHTML = "saving";
- /* place settings container at the last saved location */
- settingsContainer.style.top = settingsMenuData.y;
- settingsContainer.style.left = settingsMenuData.x;
- settingsContainer.style.width = settingsMenuData.width + "px";
- settingsContainer.style.height = settingsMenuData.height + "px";
+ // if data was just imported directly to localStorage, don't save current element states (would overwrite import)
+ if (justImported) {
+ justImported = false;
+ return;
+ }
- /* add event listeners */
- // moving / resizing
- settingsContainer.addEventListener(
- "mousedown",
- mouseDownMovableElement,
- true
- );
- // local state inputs
- document.getElementById("imageRatioToggle").checked = !keepImageRatio;
- document
- .getElementById("imageRatioToggle")
- .addEventListener("change", toggleImageRatio, false);
-
-
- // prevent context menu when resizing
- settingsContainer.addEventListener("contextmenu", (e) => {
- e.preventDefault();
- });
+ // save state of settings menu
+ localStorage.setItem(
+ "settingsMenuData",
+ JSON.stringify(settingsMenuData)
+ );
- // stop resizing element if cursor leaves page
- document.addEventListener("mouseleave", (mouseLeave) => {
- if (resizing) {
- resizing = false;
- document.removeEventListener("mousemove", resizeElement);
- storeElementData();
- }
- });
- }
+ // save states of all containers
+ let valueArray = [];
+ containerDataMap.values().forEach((value) => {
+ valueArray.push(value);
+ });
+ localStorage.setItem("containerMapValues", JSON.stringify(valueArray));
- /************************
- * LOCAL STATE MANAGERS *
- ************************/
+ /* save z-indexes */
+ let temp = {};
+ zIndexMap.keys().forEach((key) => {
+ temp[key] = zIndexMap.get(key);
+ });
+ localStorage.setItem("zIndexMapData", JSON.stringify(temp));
- /** primary event handler for toggling page editing */
- function toggleEditMode() {
- // enable editing mode (reveal hidden elements)
- if (editing == false) {
- editing = true;
- toggleEditingElements(true);
- }
- // disable editing mode + save element data
- else {
- editing = false;
- toggleEditingElements(false);
- document.getElementById("editToggle").innerHTML = "saving";
+ // save wallpaper info
+ localStorage.setItem("wallpaper", JSON.stringify(wallpaper));
+ localStorage.setItem(
+ "repeatWallpaper",
+ JSON.stringify(repeatWallpaper)
+ );
- // if data was just imported directly to localStorage, don't save current element states (would overwrite import)
- if (justImported) {
- justImported = false;
- return;
- }
+ // save doodad + gadget cookies
+ localStorage.setItem("audioLink", JSON.stringify(audioLink));
+ localStorage.setItem("autoplayAudio", JSON.stringify(autoplayAudio));
+ localStorage.setItem("cursors", JSON.stringify(cursors));
- // save state of settings menu
- localStorage.setItem(
- "settingsMenuData",
- JSON.stringify(settingsMenuData)
- );
+ // save active settings tab for next session
+ localStorage.setItem("activeTabId", JSON.stringify(activeTabId));
- // save states of all containers
- let valueArray = [];
- containerDataMap.values().forEach((value) => {
- valueArray.push(value);
- });
- localStorage.setItem("containerMapValues", JSON.stringify(valueArray));
+ // save edit mode toggle customization
+ localStorage.setItem("editToggleRgba", editToggleRgba);
- /* save z-indexes */
- let temp = {};
- zIndexMap.keys().forEach((key) => {
- temp[key] = zIndexMap.get(key);
- });
- localStorage.setItem("zIndexMapData", JSON.stringify(temp));
+ // lastly, set current state as download contents for export button
+ const exportData = new Blob([JSON.stringify(localStorage)], {type: 'text/plain'});
+ const url = window.URL.createObjectURL(exportData);
+ document.getElementById("export-button").href = url;
- // save wallpaper info
- localStorage.setItem("wallpaper", JSON.stringify(wallpaper));
- localStorage.setItem(
- "repeatWallpaper",
- JSON.stringify(repeatWallpaper)
- );
+ document.getElementById("editToggle").innerHTML = "edit page";
+ }
+ }
- // save doodad + gadget cookies
- localStorage.setItem("audioLink", JSON.stringify(audioLink));
- localStorage.setItem("autoplayAudio", JSON.stringify(autoplayAudio));
- localStorage.setItem("cursors", JSON.stringify(cursors));
+ /** handles the revealing/concealing of elements part of toggling edit mode */
+ function toggleEditingElements(show) {
+ const editButton = document.getElementById("editToggle");
+ const settingsContainer = document.getElementById("settingsContainer");
- // save active settings tab for next session
- localStorage.setItem("activeTabId", JSON.stringify(activeTabId));
+ /** when editing-mode is enabled, */
+ if (show) {
+ editButton.innerHTML = "save + stop editing";
- // save edit mode toggle customization
- localStorage.setItem("editToggleRgba", editToggleRgba);
+ // reveal settings container
+ settingsContainer.classList.remove("hidden");
- // lastly, set current state as download contents for export button
- const exportData = new Blob([JSON.stringify(localStorage)], {type: 'text/plain'});
- const url = window.URL.createObjectURL(exportData);
- document.getElementById("export-button").href = url;
+ // change cursor on movable elements to indicate grabbable
+ let movableElements = document.getElementsByClassName("movable");
+ for (let i = 0; i < movableElements.length; i++) {
+ // mmovableElements[i].classList.add("grabbable");
+ movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
+ }
- document.getElementById("editToggle").innerHTML = "edit page";
- }
- }
+ // take hyperlinked images out of anchor tags to enable moving/resizing
+ let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
+ let parent, clone;
+ for (let i = 0; i < hyperlinkedImages.length; i++) {
+ parent = hyperlinkedImages[i].parentElement;
+ clone = hyperlinkedImages[i].cloneNode();
+ hyperlinkedImages[i].remove();
+ parent.parentNode.insertBefore(clone, parent);
+ parent.remove();
+ containerDataMap.get(clone.id).addContainerEventListeners();
+ }
- /** handles the revealing/concealing of elements part of toggling edit mode */
- function toggleEditingElements(show) {
- const editButton = document.getElementById("editToggle");
- const settingsContainer = document.getElementById("settingsContainer");
+ // cover any youtube iframes to enable moving/resizing
+ let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
+ for (let i = 0; i < embeddedVideos.length; i++) {
+ embeddedVideos[i].style.display = "block";
+ }
- /** when editing-mode is enabled, */
- if (show) {
- editButton.innerHTML = "save + stop editing";
+ } else {
+ // remove grabbable cursor
+ let movableElements = document.getElementsByClassName("movable");
+ for (let i = 0; i < movableElements.length; i++) {
+ movableElements[i].style.cursor = "";
+ }
- // reveal settings container
- settingsContainer.classList.remove("hidden");
+ // activate links on hyperlinked images
+ let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
+ let link, clone;
+ for (let i = 0; i < hyperlinkedImages.length; i++) {
+ containerId = hyperlinkedImages[i].id;
+ link = containerDataMap.get(containerId).imageHyperlink;
+ clone = hyperlinkedImages[i].cloneNode();
+
+ hyperlinkedImages[i].insertAdjacentHTML("afterend",
+ `<a id="` + containerId + `--hyperlink" href="` + link + `"></a>`
+ );
+ hyperlinkedImages[i].remove();
+ document.getElementById(containerId + "--hyperlink").appendChild(clone);
- // change cursor on movable elements to indicate grabbable
- let movableElements = document.getElementsByClassName("movable");
- for (let i = 0; i < movableElements.length; i++) {
- // mmovableElements[i].classList.add("grabbable");
- movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
- }
+ if (cursors.link != undefined) {
+ document.getElementById(containerId + "--hyperlink").style.cursor = cursors.link ? 'url("' + cursors.link + '"), pointer' : "";
+ }
+ }
- // take hyperlinked images out of anchor tags to enable moving/resizing
- let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
- let parent, clone;
- for (let i = 0; i < hyperlinkedImages.length; i++) {
- parent = hyperlinkedImages[i].parentElement;
- clone = hyperlinkedImages[i].cloneNode();
- hyperlinkedImages[i].remove();
- parent.parentNode.insertBefore(clone, parent);
- parent.remove();
- containerDataMap.get(clone.id).addContainerEventListeners();
- }
+ // remove any youtube iframe covers
+ let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
+ for (let i = 0; i < embeddedVideos.length; i++) {
+ embeddedVideos[i].style.display = "none";
+ }
- // cover any youtube iframes to enable moving/resizing
- let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
- for (let i = 0; i < embeddedVideos.length; i++) {
- embeddedVideos[i].style.display = "block";
+ // hide the settings container
+ settingsContainer.classList.add("hidden");
}
+ }
- } else {
- // remove grabbable cursor
- let movableElements = document.getElementsByClassName("movable");
- for (let i = 0; i < movableElements.length; i++) {
- movableElements[i].style.cursor = "";
+ function toggleExpandableMenu(toggleButton) {
+ toggleButton.classList.toggle("active");
+ let menuContent = toggleButton.nextElementSibling;
+
+ if (menuContent.style.display === "block") {
+ menuContent.style.display = "none";
+ toggleButton.children[1].innerHTML = "+";
+ } else {
+ menuContent.style.display = "block";
+ toggleButton.children[1].innerHTML = "-";
}
+ }
- // activate links on hyperlinked images
- let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
- let link, clone;
- for (let i = 0; i < hyperlinkedImages.length; i++) {
- containerId = hyperlinkedImages[i].id;
- link = containerDataMap.get(containerId).imageHyperlink;
- clone = hyperlinkedImages[i].cloneNode();
-
- hyperlinkedImages[i].insertAdjacentHTML("afterend",
- `<a id="` + containerId + `--hyperlink" href="` + link + `"></a>`
- );
- hyperlinkedImages[i].remove();
- document.getElementById(containerId + "--hyperlink").appendChild(clone);
+ function collapseLayerListings() {
+ let listings = document.getElementsByClassName("containerListing");
- if (cursors.link != undefined) {
- document.getElementById(containerId + "--hyperlink").style.cursor = cursors.link ? 'url("' + cursors.link + '"), pointer' : "";
+ for (let i = 0; i < listings.length; i++) {
+ // first child of a container listing is always the menu toggle
+ if (listings[i].children[0].classList.contains("active")) {
+ toggleExpandableMenu(listings[i].children[0]);
}
}
+ }
- // remove any youtube iframe covers
- let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
- for (let i = 0; i < embeddedVideos.length; i++) {
- embeddedVideos[i].style.display = "none";
- }
+ function expandLayerListings() {
+ let listings = document.getElementsByClassName("containerListing");
- // hide the settings container
- settingsContainer.classList.add("hidden");
+ for (let i = 0; i < listings.length; i++) {
+ // first child of a container listing is always the menu toggle
+ if (!listings[i].children[0].classList.contains("active")) {
+ toggleExpandableMenu(listings[i].children[0]);
+ }
+ }
}
- }
- function toggleExpandableMenu(toggleButton) {
- toggleButton.classList.toggle("active");
- let menuContent = toggleButton.nextElementSibling;
-
- if (menuContent.style.display === "block") {
- menuContent.style.display = "none";
- toggleButton.children[1].innerHTML = "+";
- } else {
- menuContent.style.display = "block";
- toggleButton.children[1].innerHTML = "-";
+ function toggleImageRatio() {
+ keepImageRatio = !document.getElementById("imageRatioToggle").checked;
}
- }
-
- function collapseLayerListings() {
- let listings = document.getElementsByClassName("containerListing");
- for (let i = 0; i < listings.length; i++) {
- // first child of a container listing is always the menu toggle
- if (listings[i].children[0].classList.contains("active")) {
- toggleExpandableMenu(listings[i].children[0]);
+ function toggleWallpaperRepeat(checkbox) {
+ repeatWallpaper = this.checked;
+ if (repeatWallpaper) {
+ document.body.style.backgroundSize = "contain";
+ document.body.style.backgroundRepeat = "repeat";
+
+ } else {
+ document.body.style.backgroundSize = "cover";
+ document.body.style.backgroundPosition = "center";
+ document.body.style.backgroundRepeat = "no-repeat";
}
}
- }
- function expandLayerListings() {
- let listings = document.getElementsByClassName("containerListing");
-
- for (let i = 0; i < listings.length; i++) {
- // first child of a container listing is always the menu toggle
- if (!listings[i].children[0].classList.contains("active")) {
- toggleExpandableMenu(listings[i].children[0]);
+ function unloadPage() {
+ if (editing) {
+ return "you are currently editing and changes are unsaved. stay?";
}
}
- }
- function toggleImageRatio() {
- keepImageRatio = !document.getElementById("imageRatioToggle").checked;
- }
+ function changeActiveTab(event) {
+ // remove 'active' state from current tab
+ document.getElementById(activeTabId).classList.remove("active");
- function toggleWallpaperRepeat(checkbox) {
- repeatWallpaper = this.checked;
- if (repeatWallpaper) {
- document.body.style.backgroundSize = "contain";
- document.body.style.backgroundRepeat = "repeat";
-
- } else {
- document.body.style.backgroundSize = "cover";
- document.body.style.backgroundPosition = "center";
- document.body.style.backgroundRepeat = "no-repeat";
- }
- }
+ document.getElementById(
+ activeTabId.replace("Tab", "Page")
+ ).style.display = "none";
+
+ // set new tab
+ activeTabId = event.target.id;
+ document.getElementById(
+ activeTabId.replace("Tab", "Page")
+ ).style.display = "flex";
- function unloadPage() {
- if (editing) {
- return "you are currently editing and changes are unsaved. stay?";
+ document.getElementById(activeTabId).classList.add("active");
}
- }
- function changeActiveTab(event) {
- // remove 'active' state from current tab
- document.getElementById(activeTabId).classList.remove("active");
+ /********************************************
+ * DOCUMENT MANAGEMENT / MODIFICATION STUFF *
+ ********************************************/
- document.getElementById(
- activeTabId.replace("Tab", "Page")
- ).style.display = "none";
+ function createNewTextContainer() {
+ let containerName = document.getElementById(
+ "newTextContainerNameInput"
+ ).value;
+ document.getElementById("newTextContainerNameInput").value = "";
- // set new tab
- activeTabId = event.target.id;
- document.getElementById(
- activeTabId.replace("Tab", "Page")
- ).style.display = "flex";
+ let container = new Container(
+ undefined,
+ containerName,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ undefined
+ );
- document.getElementById(activeTabId).classList.add("active");
- }
+ container.createTextContainerMenuListing();
+ container.loadBookmarkListings();
+ container.addSettingsMenuEventListeners();
+ updateContainerListingOrder();
+ }
- /********************************************
- * DOCUMENT MANAGEMENT / MODIFICATION STUFF *
- ********************************************/
+ function createNewImageContainer() {
+ let containerName = document.getElementById(
+ "newImageContainerNameInput"
+ ).value;
+ let mediaUrl = document.getElementById(
+ "newImageContainerUrlInput"
+ ).value;
+ document.getElementById("newImageContainerNameInput").value = "";
+ document.getElementById("newImageContainerUrlInput").value = "";
- function createNewTextContainer() {
- let containerName = document.getElementById(
- "newTextContainerNameInput"
- ).value;
- document.getElementById("newTextContainerNameInput").value = "";
+ let container = new Container(
+ undefined,
+ containerName,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ mediaUrl,
+ undefined,
+ undefined,
+ undefined,
+ undefined
+ );
- let container = new Container(
- undefined,
- containerName,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined
- );
+ container.createMediaContainerMenuListing();
+ container.addSettingsMenuEventListeners();
+ updateContainerListingOrder();
+ }
- container.createTextContainerMenuListing();
- container.loadBookmarkListings();
- container.addSettingsMenuEventListeners();
- updateContainerListingOrder();
- }
+ /**
+ * Used in the case of a container being reordered, deleted, or a new container being made.
+ * Updates all container listing order numbers + recalculates whether they should have up/down buttons
+ */
+ function updateContainerListingOrder() {
+ // either show "you have no containers" or don't
+ if (numberTotalContainers > 0 && document.getElementById("noContainerWarning") != undefined) {
+ document.getElementById("noContainerWarning").remove();
+ }
+ else if (numberTotalContainers == 0 && document.getElementById("noContainerWarning") == undefined) {
+ document.getElementById("containers").insertAdjacentHTML(
+ "beforeend",
+ `<p id="noContainerWarning">(you have no layers right now)</p>`
+ );
+ return;
+ }
- function createNewImageContainer() {
- let containerName = document.getElementById(
- "newImageContainerNameInput"
- ).value;
- let mediaUrl = document.getElementById(
- "newImageContainerUrlInput"
- ).value;
- document.getElementById("newImageContainerNameInput").value = "";
- document.getElementById("newImageContainerUrlInput").value = "";
+ // go through all container listings and make only the necessary updates
+ for (let i = 1; i <= numberTotalContainers; i++) {
+ let currentContainer = containerDataMap.get(zIndexMap.get(String(i)));
+ let containerListingHeader = document.getElementById(currentContainer.id + "--listing-header");
+ let containerManageButtons = document.getElementById(currentContainer.id + "--manage-buttons");
- let container = new Container(
- undefined,
- containerName,
- undefined,
- undefined,
- undefined,
- undefined,
- mediaUrl,
- undefined,
- undefined,
- undefined,
- undefined
- );
+ // update layer number
+ containerListingHeader.innerText =
+ "[" + currentContainer.settings.zIndex + "] " + currentContainer.name;
- container.createMediaContainerMenuListing();
- container.addSettingsMenuEventListeners();
- updateContainerListingOrder();
- }
+ // remove / insert the necessary up/down buttons
+ containerManageButtons.innerHTML = "";
+ if (currentContainer.settings.zIndex != numberTotalContainers) {
+ containerManageButtons.insertAdjacentHTML(
+ "beforeend",
+ `
+ <button id="` + currentContainer.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
+ <button id="` + currentContainer.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
+ `
+ );
+ }
+ if (currentContainer.settings.zIndex != 1) {
+ containerManageButtons.insertAdjacentHTML(
+ "beforeend",
+ `
+ <button id="` + currentContainer.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
+ <button id="` + currentContainer.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
+ `
+ );
+ }
- /**
- * Used in the case of a container being reordered, deleted, or a new container being made.
- * Updates all container listing order numbers + recalculates whether they should have up/down buttons
- */
- function updateContainerListingOrder() {
- // either show "you have no containers" or don't
- if (numberTotalContainers > 0 && document.getElementById("noContainerWarning") != undefined) {
- document.getElementById("noContainerWarning").remove();
- }
- else if (numberTotalContainers == 0 && document.getElementById("noContainerWarning") == undefined) {
- document.getElementById("containers").insertAdjacentHTML(
- "beforeend",
- `<p id="noContainerWarning">(you have no layers right now)</p>`
- );
- return;
+ }
}
- // go through all container listings and make only the necessary updates
- for (let i = 1; i <= numberTotalContainers; i++) {
- let currentContainer = containerDataMap.get(zIndexMap.get(String(i)));
- let containerListingHeader = document.getElementById(currentContainer.id + "--listing-header");
- let containerManageButtons = document.getElementById(currentContainer.id + "--manage-buttons");
+ function reorderContainer(buttonPressed, direction) {
+ /** first, deal with reordering container listings */
+ let containerId = buttonPressed.id.split("--")[0];
+ let movingContainer = containerDataMap.get(containerId);
- // update layer number
- containerListingHeader.innerText =
- "[" + currentContainer.settings.zIndex + "] " + currentContainer.name;
+ let currentIndex = parseInt(movingContainer.settings.zIndex);
+ let destinationIndex;
+
+ // clone + remove the relocating listing
+ let clickedListingCopy = document.getElementById(containerId + "-container-listing").cloneNode(true);
+ document.getElementById(containerId + "-container-listing").remove();
- // remove / insert the necessary up/down buttons
- containerManageButtons.innerHTML = "";
- if (currentContainer.settings.zIndex != numberTotalContainers) {
- containerManageButtons.insertAdjacentHTML(
- "beforeend",
- `
- <button id="` + currentContainer.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
- <button id="` + currentContainer.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
- `
- );
+ /** then, deal with reordering the actual containers */
+
+ // for up/down, simply swap container element z-indexes + save to map
+ if (direction == "up" || direction == "down") {
+
+ // determine destination + move listing
+ if (direction == "up") {
+ destinationIndex = String(currentIndex + 1);
+ document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").insertAdjacentElement("beforebegin", clickedListingCopy);
}
- if (currentContainer.settings.zIndex != 1) {
- containerManageButtons.insertAdjacentHTML(
- "beforeend",
- `
- <button id="` + currentContainer.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
- <button id="` + currentContainer.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
- `
- );
+ else if (direction == "down") {
+ destinationIndex = String(currentIndex - 1);
+ document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").insertAdjacentElement("afterend", clickedListingCopy);
}
+
+ // swap z-index of element in destination index with current
+ document.getElementById(containerId).style.zIndex = destinationIndex;
+ document.getElementById(zIndexMap.get(destinationIndex)).style.zIndex = currentIndex;
+
+ // save new indexes to container data
+ movingContainer.settings.zIndex = parseInt(destinationIndex);
+ containerDataMap.get(zIndexMap.get(destinationIndex)).settings.zIndex = currentIndex;
- }
- }
-
- function reorderContainer(buttonPressed, direction) {
- /** first, deal with reordering container listings */
- let containerId = buttonPressed.id.split("--")[0];
- let movingContainer = containerDataMap.get(containerId);
+ // save changes to map
+ zIndexMap.set(String(currentIndex), zIndexMap.get(destinationIndex));
+ zIndexMap.set(destinationIndex, movingContainer.id);
- let currentIndex = parseInt(movingContainer.settings.zIndex);
- let destinationIndex;
-
- // clone + remove the relocating listing
- let clickedListingCopy = document.getElementById(containerId + "-container-listing").cloneNode(true);
- document.getElementById(containerId + "-container-listing").remove();
+ // reapply listeners to menu that got remade
+ containerDataMap.get(zIndexMap.get(destinationIndex)).addSettingsMenuEventListeners();
+ }
+ // for big jumps, we don't just swap z-indexes
+ else if (direction == "top") {
+ // moved container will be at end, so we need to ripple all zIndexes between Current and end down 1
+ for (let i = currentIndex; i < numberTotalContainers; i++) {
+ zIndexMap.set(String(i), zIndexMap.get(String(i+1)))
+ document.getElementById(zIndexMap.get(String(i))).style.zIndex--;
+ containerDataMap.get(zIndexMap.get(String(i))).settings.zIndex--;
+ }
- /** then, deal with reordering the actual containers */
+ // then actually move the container and menu listing element
+ document.getElementById("containers").insertAdjacentElement("afterbegin", clickedListingCopy);
+ document.getElementById(containerId).style.zIndex = numberTotalContainers;
- // for up/down, simply swap container element z-indexes + save to map
- if (direction == "up" || direction == "down") {
+ // and save
+ containerDataMap.get(containerId).settings.zIndex = numberTotalContainers;
+ zIndexMap.set(String(numberTotalContainers), containerId);
- // determine destination + move listing
- if (direction == "up") {
- destinationIndex = String(currentIndex + 1);
- document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").insertAdjacentElement("beforebegin", clickedListingCopy);
- }
- else if (direction == "down") {
- destinationIndex = String(currentIndex - 1);
- document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").insertAdjacentElement("afterend", clickedListingCopy);
}
-
- // swap z-index of element in destination index with current
- document.getElementById(containerId).style.zIndex = destinationIndex;
- document.getElementById(zIndexMap.get(destinationIndex)).style.zIndex = currentIndex;
-
- // save new indexes to container data
- movingContainer.settings.zIndex = parseInt(destinationIndex);
- containerDataMap.get(zIndexMap.get(destinationIndex)).settings.zIndex = currentIndex;
+ else if (direction == "bottom") {
+ // moved container is now at bottom, so we need to ripple all other zIndexes up 1
+ for (let i = currentIndex; i > 1; i--) {
+ zIndexMap.set(String(i), zIndexMap.get(String(i - 1)))
+ document.getElementById(zIndexMap.get(String(i))).style.zIndex++;
+ containerDataMap.get(zIndexMap.get(String(i))).settings.zIndex++;
+ }
- // save changes to map
- zIndexMap.set(String(currentIndex), zIndexMap.get(destinationIndex));
- zIndexMap.set(destinationIndex, movingContainer.id);
+ document.getElementById("containers").insertAdjacentElement("beforeend", clickedListingCopy);
+ document.getElementById(containerId).style.zIndex = 1;
- // reapply listeners to menu that got remade
- containerDataMap.get(zIndexMap.get(destinationIndex)).addSettingsMenuEventListeners();
- }
- // for big jumps, we don't just swap z-indexes
- else if (direction == "top") {
- // moved container will be at end, so we need to ripple all zIndexes between Current and end down 1
- for (let i = currentIndex; i < numberTotalContainers; i++) {
- zIndexMap.set(String(i), zIndexMap.get(String(i+1)))
- document.getElementById(zIndexMap.get(String(i))).style.zIndex--;
- containerDataMap.get(zIndexMap.get(String(i))).settings.zIndex--;
+ // and save
+ containerDataMap.get(containerId).settings.zIndex = 1;
+ zIndexMap.set("1", containerId);
}
- // then actually move the container and menu listing element
- document.getElementById("containers").insertAdjacentElement("afterbegin", clickedListingCopy);
- document.getElementById(containerId).style.zIndex = numberTotalContainers;
-
- // and save
- containerDataMap.get(containerId).settings.zIndex = numberTotalContainers;
- zIndexMap.set(String(numberTotalContainers), containerId);
+ // since menu for moving container was removed+readded, we need to reapply listeners to inputs
+ movingContainer.addSettingsMenuEventListeners();
+ // and refresh the listings based on the new saved data
+ updateContainerListingOrder();
}
- else if (direction == "bottom") {
- // moved container is now at bottom, so we need to ripple all other zIndexes up 1
- for (let i = currentIndex; i > 1; i--) {
- zIndexMap.set(String(i), zIndexMap.get(String(i - 1)))
- document.getElementById(zIndexMap.get(String(i))).style.zIndex++;
- containerDataMap.get(zIndexMap.get(String(i))).settings.zIndex++;
- }
- document.getElementById("containers").insertAdjacentElement("beforeend", clickedListingCopy);
- document.getElementById(containerId).style.zIndex = 1;
+ function renameContainer(buttonPressed) {
+ let containerId = buttonPressed.id.split("--")[0];
+ let container = containerDataMap.get(containerId);
- // and save
- containerDataMap.get(containerId).settings.zIndex = 1;
- zIndexMap.set("1", containerId);
+ let newName = document.getElementById(containerId + "--rename-input").value;
+ container.name = newName;
+ document.getElementById(containerId + "--rename-input").value = "";
+
+ document.getElementById(containerId + "--listing-header").innerText =
+ "[" + container.settings.zIndex + "]: " + newName;
}
- // since menu for moving container was removed+readded, we need to reapply listeners to inputs
- movingContainer.addSettingsMenuEventListeners();
+ function cloneContainer(buttonPressed) {
+ let containerId;
+ if (buttonPressed.id) {
+ containerId = buttonPressed.id.split("--")[0];
+ }
+ else {
+ // if being called from keyboard shortcut
+ containerId = buttonPressed;
+ }
+ let container = containerDataMap.get(containerId);
- // and refresh the listings based on the new saved data
- updateContainerListingOrder();
- }
+ let newSettings = JSON.parse(JSON.stringify(container.settings));
+ newSettings.zIndex = numberTotalContainers + 1;
- function renameContainer(buttonPressed) {
- let containerId = buttonPressed.id.split("--")[0];
- let container = containerDataMap.get(containerId);
+ let newX = parseInt(container.x.slice(0, -2)) + 10;
+ let newY = parseInt(container.y.slice(0, -2)) + 10;
- let newName = document.getElementById(containerId + "--rename-input").value;
- container.name = newName;
- document.getElementById(containerId + "--rename-input").value = "";
+ let clone = new Container(
+ findLowestAvailableId(),
+ container.name + " clone",
+ String(newX + "px"),
+ String(newY + "px"),
+ container.height,
+ container.width,
+ container.mediaUrl,
+ newSettings,
+ container.sections,
+ container.youtubeId,
+ container.imageHyperlink
+ );
+ zIndexMap.set(numberTotalContainers + 1, clone.id);
- document.getElementById(containerId + "--listing-header").innerText =
- "[" + container.settings.zIndex + "]: " + newName;
- }
+ if (clone.mediaUrl == undefined) {
+ clone.createTextContainerMenuListing();
+ }
+ else {
+ clone.createMediaContainerMenuListing();
+ }
+ clone.addSettingsMenuEventListeners();
- function cloneContainer(buttonPressed) {
- let containerId;
- if (buttonPressed.id) {
- containerId = buttonPressed.id.split("--")[0];
+ numberTotalContainers++;
+ updateContainerListingOrder();
}
- else {
- // if being called from keyboard shortcut
- containerId = buttonPressed;
- }
- let container = containerDataMap.get(containerId);
+ function deleteContainer(buttonPressed) {
+ let containerId;
+ if (buttonPressed.id) {
+ containerId = buttonPressed.id.split("--")[0];
+ }
+ else {
+ // if being called from keyboard shortcut
+ containerId = buttonPressed;
+ }
- let newSettings = JSON.parse(JSON.stringify(container.settings));
- newSettings.zIndex = numberTotalContainers + 1;
+ let container = containerDataMap.get(containerId);
- let newX = parseInt(container.x.slice(0, -2)) + 10;
- let newY = parseInt(container.y.slice(0, -2)) + 10;
+ if (container.mediaUrl == undefined) {
+ numberOfTextContainers--;
+ clearInterval(container.clockIntervalId);
+ }
+ else {
+ numberOfMediaContainers--;
+ }
- let clone = new Container(
- findLowestAvailableId(),
- container.name + " clone",
- String(newX + "px"),
- String(newY + "px"),
- container.height,
- container.width,
- container.mediaUrl,
- newSettings,
- container.sections,
- container.youtubeId,
- container.imageHyperlink
- );
- zIndexMap.set(numberTotalContainers + 1, clone.id);
+ // delete from zindex map and ripple zIndexes down
+ for (let i = container.settings.zIndex; i < numberTotalContainers; i++) {
+ zIndexMap.set(String(i), zIndexMap.get(String(i+1)));
+ containerDataMap.get(zIndexMap.get(String(i+1))).settings.zIndex--;
+ }
+ zIndexMap.delete(String(numberTotalContainers));
- if (clone.mediaUrl == undefined) {
- clone.createTextContainerMenuListing();
- }
- else {
- clone.createMediaContainerMenuListing();
- }
- clone.addSettingsMenuEventListeners();
+ // remove data associated with container
+ containerDataMap.delete(containerId);
+ numberTotalContainers--;
- numberTotalContainers++;
- updateContainerListingOrder();
- }
- function deleteContainer(buttonPressed) {
- let containerId;
- if (buttonPressed.id) {
- containerId = buttonPressed.id.split("--")[0];
+ document.getElementById(containerId).remove();
+ document.getElementById(containerId + "-container-listing").remove();
+
+ updateContainerListingOrder();
}
- else {
- // if being called from keyboard shortcut
- containerId = buttonPressed;
+
+ /**
+ * uses map to determine the lowest available ID index for given type, to
+ * prevent accidentally using the same ID number for unnamed containers twice
+ */
+ function findLowestAvailableId() {
+ let id = "";
+ for(let index = 1; index < 200; index ++) {
+ id = "container-" + index;
+ if (!containerDataMap.has(id)) {
+ return id;
+ }
+ }
+ return -1;
}
- let container = containerDataMap.get(containerId);
+ /** upon click release on movable elements, store position data to save to localStorage when edit mode gets disabled */
+ function storeElementData() {
+ let borderWidth = changingElement.style.borderWidth.slice(0, -2) * 2; // slice to remove "px"
+ let element = document.getElementById(changingElement.id);
- if (container.mediaUrl == undefined) {
- numberOfTextContainers--;
- clearInterval(container.clockIntervalId);
- }
- else {
- numberOfMediaContainers--;
+ if (changingElement.id == "settingsContainer") {
+ settingsMenuData.x = element.style.left;
+ settingsMenuData.y = element.style.top;
+ settingsMenuData.width = element.offsetWidth;
+ settingsMenuData.height = element.offsetHeight;
+ }
+ else {
+ let container = containerDataMap.get(element.id);
+ container.x = element.style.left;
+ container.y = element.style.top;
+ container.width = element.offsetWidth - borderWidth;
+ container.height = element.offsetHeight - borderWidth;
+ }
}
- // delete from zindex map and ripple zIndexes down
- for (let i = container.settings.zIndex; i < numberTotalContainers; i++) {
- zIndexMap.set(String(i), zIndexMap.get(String(i+1)));
- containerDataMap.get(zIndexMap.get(String(i+1))).settings.zIndex--;
+ function setAudioLink() {
+ let link = document.getElementById("audioLinkInput").value;
+ if (link == "") {
+ return;
+ }
+ audioLink = link;
+ document.getElementById("audioLinkInput").value = "";
+ document.getElementById("audioSource").src = audioLink;
+ document.getElementById("audio").load();
}
- zIndexMap.delete(String(numberTotalContainers));
-
- // remove data associated with container
- containerDataMap.delete(containerId);
- numberTotalContainers--;
- document.getElementById(containerId).remove();
- document.getElementById(containerId + "-container-listing").remove();
-
- updateContainerListingOrder();
- }
+ function toggleAutoplayAudio(checkbox) {
+ autoplayAudio = this.checked;
+ }
- /**
- * uses map to determine the lowest available ID index for given type, to
- * prevent accidentally using the same ID number for unnamed containers twice
- */
- function findLowestAvailableId() {
- let id = "";
- for(let index = 1; index < 200; index ++) {
- id = "container-" + index;
- if (!containerDataMap.has(id)) {
- return id;
+ function changeWallpaper(event) {
+ // if image set
+ if (event == undefined) {
+ // get background url
+ let url = document.getElementById("wallpaperUrl").value;
+ if (url == "") {
+ alert("must add image url to add background");
+ return;
+ }
+ document.body.style.backgroundImage = "url('" + url + "')";
+ document.getElementById("wallpaperUrl").value = "";
+ wallpaper = url;
+ }
+ // if solid color set
+ else {
+ document.body.style.background = event.target.value;
+ wallpaper = event.target.value;
}
}
- return -1;
- }
- /** upon click release on movable elements, store position data to save to localStorage when edit mode gets disabled */
- function storeElementData() {
- let borderWidth = changingElement.style.borderWidth.slice(0, -2) * 2; // slice to remove "px"
- let element = document.getElementById(changingElement.id);
-
- if (changingElement.id == "settingsContainer") {
- settingsMenuData.x = element.style.left;
- settingsMenuData.y = element.style.top;
- settingsMenuData.width = element.offsetWidth;
- settingsMenuData.height = element.offsetHeight;
- }
- else {
- let container = containerDataMap.get(element.id);
- container.x = element.style.left;
- container.y = element.style.top;
- container.width = element.offsetWidth - borderWidth;
- container.height = element.offsetHeight - borderWidth;
- }
- }
+ function changeEditToggleColor(colorChange) {
+ editToggleRgba = hexToRgba(
+ document.getElementById("edit-toggle-color").value,
+ document.getElementById("edit-toggle-alpha").value
+ );
- function setAudioLink() {
- let link = document.getElementById("audioLinkInput").value;
- if (link == "") {
- return;
+ document.getElementById("editToggle").style.color = editToggleRgba;
}
- audioLink = link;
- document.getElementById("audioLinkInput").value = "";
- document.getElementById("audioSource").src = audioLink;
- document.getElementById("audio").load();
- }
-
- function toggleAutoplayAudio(checkbox) {
- autoplayAudio = this.checked;
- }
- function changeWallpaper(event) {
- // if image set
- if (event == undefined) {
- // get background url
- let url = document.getElementById("wallpaperUrl").value;
- if (url == "") {
- alert("must add image url to add background");
+ function moveElement(mouseMove) {
+ if (!moving) {
return;
}
- document.body.style.backgroundImage = "url('" + url + "')";
- document.getElementById("wallpaperUrl").value = "";
- wallpaper = url;
- }
- // if solid color set
- else {
- document.body.style.background = event.target.value;
- wallpaper = event.target.value;
- }
- }
- function changeEditToggleColor(colorChange) {
- editToggleRgba = hexToRgba(
- document.getElementById("edit-toggle-color").value,
- document.getElementById("edit-toggle-alpha").value
- );
+ // calculate offset from last mouse position to current position (1 frame at a time)
+ let mouseOffsetX = lastMouseX - mouseMove.clientX;
+ let mouseOffsetY = lastMouseY - mouseMove.clientY;
- document.getElementById("editToggle").style.color = editToggleRgba;
- }
+ // save coords of mousepos for use above ^ next frame
+ lastMouseX = mouseMove.clientX;
+ lastMouseY = mouseMove.clientY;
- function moveElement(mouseMove) {
- if (!moving) {
- return;
+ // move to element same distance as mouse offset
+ changingElement.style.top =
+ changingElement.offsetTop - mouseOffsetY + "px";
+ changingElement.style.left =
+ changingElement.offsetLeft - mouseOffsetX + "px";
}
- // calculate offset from last mouse position to current position (1 frame at a time)
- let mouseOffsetX = lastMouseX - mouseMove.clientX;
- let mouseOffsetY = lastMouseY - mouseMove.clientY;
+ function resizeElement(mouseMove) {
+ if (!resizing) {
+ return;
+ }
- // save coords of mousepos for use above ^ next frame
- lastMouseX = mouseMove.clientX;
- lastMouseY = mouseMove.clientY;
+ // calculate offset from last mouse position to current position (1 frame at a time)
+ let mouseOffsetX = lastMouseX - mouseMove.clientX;
+ let mouseOffsetY = lastMouseY - mouseMove.clientY;
- // move to element same distance as mouse offset
- changingElement.style.top =
- changingElement.offsetTop - mouseOffsetY + "px";
- changingElement.style.left =
- changingElement.offsetLeft - mouseOffsetX + "px";
- }
+ // save coords of mousepos for use above ^ next frame
+ lastMouseX = mouseMove.clientX;
+ lastMouseY = mouseMove.clientY;
- function resizeElement(mouseMove) {
- if (!resizing) {
- return;
- }
+ let borderWidth =
+ window.getComputedStyle(changingElement).borderWidth.slice(0, -2) * 2 +
+ window.getComputedStyle(changingElement).padding.slice(0, -2) * 2; // remove "px"
+ let currentWidth = changingElement.offsetWidth - borderWidth;
+ let currentHeight = changingElement.offsetHeight - borderWidth;
- // calculate offset from last mouse position to current position (1 frame at a time)
- let mouseOffsetX = lastMouseX - mouseMove.clientX;
- let mouseOffsetY = lastMouseY - mouseMove.clientY;
+ // if proportional image resizing enabled
+ if ((changingElement.tagName == "IMG" || changingElement.classList.contains("media")) && keepImageRatio) {
+ // growing
+ if (mouseOffsetY > 0) {
+ let newWidth = currentWidth * (1 + mouseOffsetY / 100);
+ let newHeight = currentHeight * (1 + mouseOffsetY / 100);
- // save coords of mousepos for use above ^ next frame
- lastMouseX = mouseMove.clientX;
- lastMouseY = mouseMove.clientY;
+ // determine offset in px (to keep image center while resizing)
+ let offsetX = (currentWidth - newWidth) / 2.0;
+ let offsetY = (currentHeight - newHeight) / 2.0;
- let borderWidth =
- window.getComputedStyle(changingElement).borderWidth.slice(0, -2) * 2 +
- window.getComputedStyle(changingElement).padding.slice(0, -2) * 2; // remove "px"
- let currentWidth = changingElement.offsetWidth - borderWidth;
- let currentHeight = changingElement.offsetHeight - borderWidth;
+ changingElement.style.width = newWidth + "px";
+ changingElement.style.height = newHeight + "px";
- // if proportional image resizing enabled
- if ((changingElement.tagName == "IMG" || changingElement.classList.contains("media")) && keepImageRatio) {
- // growing
- if (mouseOffsetY > 0) {
- let newWidth = currentWidth * (1 + mouseOffsetY / 100);
- let newHeight = currentHeight * (1 + mouseOffsetY / 100);
+ changingElement.style.left =
+ changingElement.offsetLeft + offsetX + "px";
+ changingElement.style.top =
+ changingElement.offsetTop + offsetY + "px";
+ }
+ // shrinking
+ else if (mouseOffsetY < 0) {
+ let newWidth = currentWidth * (1 + mouseOffsetY / 100);
+ let newHeight = currentHeight * (1 + mouseOffsetY / 100);
- // determine offset in px (to keep image center while resizing)
- let offsetX = (currentWidth - newWidth) / 2.0;
- let offsetY = (currentHeight - newHeight) / 2.0;
+ // determine offset in px (to keep image center while resizing)
+ let offsetX = (currentWidth - newWidth) / 2.0;
+ let offsetY = (currentHeight - newHeight) / 2.0;
- changingElement.style.width = newWidth + "px";
- changingElement.style.height = newHeight + "px";
+ changingElement.style.width = newWidth + "px";
+ changingElement.style.height = newHeight + "px";
- changingElement.style.left =
- changingElement.offsetLeft + offsetX + "px";
- changingElement.style.top =
- changingElement.offsetTop + offsetY + "px";
+ changingElement.style.left =
+ changingElement.offsetLeft + offsetX + "px";
+ changingElement.style.top =
+ changingElement.offsetTop + offsetY + "px";
+ }
}
- // shrinking
- else if (mouseOffsetY < 0) {
- let newWidth = currentWidth * (1 + mouseOffsetY / 100);
- let newHeight = currentHeight * (1 + mouseOffsetY / 100);
-
- // determine offset in px (to keep image center while resizing)
- let offsetX = (currentWidth - newWidth) / 2.0;
- let offsetY = (currentHeight - newHeight) / 2.0;
-
- changingElement.style.width = newWidth + "px";
+ // if resizing container / image freely
+ else {
+ let newHeight = currentHeight - mouseOffsetY;
+ let newWidth = currentWidth - mouseOffsetX;
changingElement.style.height = newHeight + "px";
-
- changingElement.style.left =
- changingElement.offsetLeft + offsetX + "px";
- changingElement.style.top =
- changingElement.offsetTop + offsetY + "px";
+ changingElement.style.width = newWidth + "px";
}
}
- // if resizing container / image freely
- else {
- let newHeight = currentHeight - mouseOffsetY;
- let newWidth = currentWidth - mouseOffsetX;
- changingElement.style.height = newHeight + "px";
- changingElement.style.width = newWidth + "px";
- }
- }
- function mouseDownMovableElement(mouseDown) {
+ function mouseDownMovableElement(mouseDown) {
- /** MOVEMENT / RESIZING HANDLERS */
- if (!editing ||
- mouseDown.target.tagName == "BUTTON" ||
- mouseDown.target.tagName == "INPUT" ||
- mouseDown.target.tagName == "LABEL" ||
- mouseDown.target.parentElement.classList.contains("expandableMenuToggle") ||
- mouseDown.target.classList.contains("expandableMenuToggle")
- ) {
- return;
- }
+ /** MOVEMENT / RESIZING HANDLERS */
+ if (!editing ||
+ mouseDown.target.tagName == "BUTTON" ||
+ mouseDown.target.tagName == "INPUT" ||
+ mouseDown.target.tagName == "LABEL" ||
+ mouseDown.target.parentElement.classList.contains("expandableMenuToggle") ||
+ mouseDown.target.classList.contains("expandableMenuToggle")
+ ) {
+ return;
+ }
- changingElement = document.getElementById(mouseDown.currentTarget.id);
+ changingElement = document.getElementById(mouseDown.currentTarget.id);
- // save mouse position prior to drag event
- lastMouseX = mouseDown.clientX;
- lastMouseY = mouseDown.clientY;
+ // save mouse position prior to drag event
+ lastMouseX = mouseDown.clientX;
+ lastMouseY = mouseDown.clientY;
- // left click drag initiates movement, release on mouse up
- if (mouseDown.button == 0) {
- moving = true;
- document.addEventListener("mousemove", moveElement);
- document.addEventListener("mouseup", (mouseUp) => {
- if (moving && mouseUp.button == 0) {
- moving = false;
- document.removeEventListener("mousemove", moveElement);
- storeElementData();
- }
- });
- }
- // right click drag initiates movement, release on mouse up
- if (mouseDown.button == 2) {
- resizing = true;
- document.addEventListener("mousemove", resizeElement);
- document.addEventListener("mouseup", (mouseUp) => {
- if (resizing && mouseUp.button == 2) {
- resizing = false;
- document.removeEventListener("mousemove", resizeElement);
- storeElementData();
- }
- });
+ // left click drag initiates movement, release on mouse up
+ if (mouseDown.button == 0) {
+ moving = true;
+ document.addEventListener("mousemove", moveElement);
+ document.addEventListener("mouseup", (mouseUp) => {
+ if (moving && mouseUp.button == 0) {
+ moving = false;
+ document.removeEventListener("mousemove", moveElement);
+ storeElementData();
+ }
+ });
+ }
+ // right click drag initiates movement, release on mouse up
+ if (mouseDown.button == 2) {
+ resizing = true;
+ document.addEventListener("mousemove", resizeElement);
+ document.addEventListener("mouseup", (mouseUp) => {
+ if (resizing && mouseUp.button == 2) {
+ resizing = false;
+ document.removeEventListener("mousemove", resizeElement);
+ storeElementData();
+ }
+ });
+ }
}
- }
- function keyDownMovableElement(keyDown) {
- if (!editing ||
- keyDown.target.id == "settingsContainer" ||
- keyDown.key == "Escape"
- ) {
- return;
- }
- keyDown.stopPropagation();
+ function keyDownMovableElement(keyDown) {
+ if (!editing ||
+ keyDown.target.id == "settingsContainer" ||
+ keyDown.key == "Escape"
+ ) {
+ return;
+ }
+ keyDown.stopPropagation();
- changingElement = document.getElementById(keyDown.target.id);
+ changingElement = document.getElementById(keyDown.target.id);
- currentX = parseInt(changingElement.style.left.replace("px", ""));
- currentY = parseInt(changingElement.style.top.replace("px", ""));
+ currentX = parseInt(changingElement.style.left.replace("px", ""));
+ currentY = parseInt(changingElement.style.top.replace("px", ""));
- // deletion
- if(keyDown.key == "Backspace") {
- deleteContainer(keyDown.target.id);
- }
- // nudges
- if(keyDown.key == "ArrowUp") {
- changingElement.style.top =`${currentY - 1}px`;
- storeElementData();
- }
- if(keyDown.key == "ArrowRight") {
- changingElement.style.left =`${currentX + 1}px`;
- storeElementData();
- }
- if(keyDown.key == "ArrowDown") {
- changingElement.style.top =`${currentY + 1}px`;
- storeElementData();
- }
- if(keyDown.key == "ArrowLeft") {
- changingElement.style.left =`${currentX - 1}px`;
- storeElementData();
+ // deletion
+ if(keyDown.key == "Backspace") {
+ deleteContainer(keyDown.target.id);
+ }
+ // nudges
+ if(keyDown.key == "ArrowUp") {
+ changingElement.style.top =
+ `${keyDown.shiftKey ? currentY - 5 : currentY - 1}px`;
+ storeElementData();
+ }
+ if(keyDown.key == "ArrowRight") {
+ changingElement.style.left =
+ `${keyDown.shiftKey ? currentX + 5 : currentX + 1}px`;
+ storeElementData();
+ }
+ if(keyDown.key == "ArrowDown") {
+ changingElement.style.top =
+ `${keyDown.shiftKey ? currentY + 5 : currentY + 1}px`;
+ storeElementData();
+ }
+ if(keyDown.key == "ArrowLeft") {
+ changingElement.style.left =
+ `${keyDown.shiftKey ? currentX - 5 : currentX - 1}px`;
+ storeElementData();
+ }
}
- }
- function setDefaultCursor() {
- cursors.default = document.getElementById("pointerCursorInput").value;
- // apply new default cursor to entire html document
- document.getElementsByTagName("html")[0].style.cursor =
- 'url("' + cursors.default + '"), auto';
-
- document.getElementById("pointerCursorInput").value = "";
- }
+ function setDefaultCursor() {
+ cursors.default = document.getElementById("pointerCursorInput").value;
+ // apply new default cursor to entire html document
+ document.getElementsByTagName("html")[0].style.cursor =
+ 'url("' + cursors.default + '"), auto';
- function setGrabCursor() {
- cursors.grab = document.getElementById("grabCursorInput").value;
- // apply new grab cursor to grabbable elements...
- let movableElements = document.getElementsByClassName("movable");
- for (let i = 0; i < movableElements.length; i++) {
- movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
+ document.getElementById("pointerCursorInput").value = "";
}
- document.getElementById("grabCursorInput").value = "";
- }
- function setLinkHoverCursor() {
- cursors.link = document.getElementById("linkCursorInput").value;
- // apply cursor on links...
- let links = document.getElementsByTagName("a");
- for (let i = 0; i < links.length; i++) {
- links[i].style.cursor = cursors.link ? 'url("' + cursors.link + '"), pointer' : "pointer";
+ function setGrabCursor() {
+ cursors.grab = document.getElementById("grabCursorInput").value;
+ // apply new grab cursor to grabbable elements...
+ let movableElements = document.getElementsByClassName("movable");
+ for (let i = 0; i < movableElements.length; i++) {
+ movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
+ }
+ document.getElementById("grabCursorInput").value = "";
}
- document.getElementById("linkCursorInput").value = "";
- }
-
- /**********************
- * BOOK MARK HANDLERS *
- **********************/
-
- function addLink(containerElement) {
- let containerId = containerElement.id.split("-add-link-")[0];
- let container = containerDataMap.get(containerId);
- // collect data from inputs
- let url = document.getElementById(containerId + "-url-input").value;
- let label = document.getElementById(containerId + "-label-input").value;
- let section = document.getElementById(containerId + "-section-input").value;
-
- // sanitize input
- if (url.length > 0 && !url.startsWith("http")) {
- url = "https://" + url; // append HTTPS to link if needed
- }
- if (section == "" && (label == "" || url == "https://")) {
- alert("you must specify url and label to add a bookmark");
- return;
+ function setLinkHoverCursor() {
+ cursors.link = document.getElementById("linkCursorInput").value;
+ // apply cursor on links...
+ let links = document.getElementsByTagName("a");
+ for (let i = 0; i < links.length; i++) {
+ links[i].style.cursor = cursors.link ? 'url("' + cursors.link + '"), pointer' : "pointer";
+ }
+ document.getElementById("linkCursorInput").value = "";
}
- // store new link in container
- let sectionData = Object.values(container.sections);
- let sectionLabels = [];
- for (let i = 0; i < sectionData.length; i++) {
- sectionLabels.push(sectionData[i].label);
- }
+ /**********************
+ * BOOK MARK HANDLERS *
+ **********************/
- let sectionIndex = sectionLabels.indexOf(section);
- // add link to existing section
- if (sectionIndex != -1) {
- let tempSectionLinks = Object.values(container.sections)[sectionIndex].links;
- tempSectionLinks.push({
- label: label,
- url: url
- });
- }
- // or create new section + add link
- else {
- let newSectionLinks = [];
- newSectionLinks.push({
- label: label,
- url: url
- });
+ function addLink(containerElement) {
+ let containerId = containerElement.id.split("-add-link-")[0];
+ let container = containerDataMap.get(containerId);
- // ensure that uncategorized links stay at top of container
- if (section == "" && sectionData.length > 0) {
- let reorderedSections = {};
- reorderedSections[0] = {};
- reorderedSections[0].links = newSectionLinks;
- reorderedSections[0].label = section;
+ // collect data from inputs
+ let url = document.getElementById(containerId + "-url-input").value;
+ let label = document.getElementById(containerId + "-label-input").value;
+ let section = document.getElementById(containerId + "-section-input").value;
- // move existing sections down
- for (let i = 0; i < sectionData.length; i++) {
- reorderedSections[i+1] = sectionData[i];
- }
+ // sanitize input
+ if (url.length > 0 && !url.startsWith("http")) {
+ url = "https://" + url; // append HTTPS to link if needed
+ }
+ if (section == "" && (label == "" || url == "https://")) {
+ alert("you must specify url and label to add a bookmark");
+ return;
+ }
+
+ // store new link in container
+ let sectionData = Object.values(container.sections);
+ let sectionLabels = [];
+ for (let i = 0; i < sectionData.length; i++) {
+ sectionLabels.push(sectionData[i].label);
+ }
- container.sections = reorderedSections;
+ let sectionIndex = sectionLabels.indexOf(section);
+ // add link to existing section
+ if (sectionIndex != -1) {
+ let tempSectionLinks = Object.values(container.sections)[sectionIndex].links;
+ tempSectionLinks.push({
+ label: label,
+ url: url
+ });
}
+ // or create new section + add link
else {
- container.sections[sectionData.length] = {};
- container.sections[sectionData.length].links = newSectionLinks;
- container.sections[sectionData.length].label = section;
+ let newSectionLinks = [];
+ newSectionLinks.push({
+ label: label,
+ url: url
+ });
+
+ // ensure that uncategorized links stay at top of container
+ if (section == "" && sectionData.length > 0) {
+ let reorderedSections = {};
+ reorderedSections[0] = {};
+ reorderedSections[0].links = newSectionLinks;
+ reorderedSections[0].label = section;
+
+ // move existing sections down
+ for (let i = 0; i < sectionData.length; i++) {
+ reorderedSections[i+1] = sectionData[i];
+ }
+
+ container.sections = reorderedSections;
+ }
+ else {
+ container.sections[sectionData.length] = {};
+ container.sections[sectionData.length].links = newSectionLinks;
+ container.sections[sectionData.length].label = section;
+ }
}
+
+ // reset inputs + render
+ document.getElementById(containerId + "-url-input").value = "";
+ document.getElementById(containerId + "-label-input").value = "";
+ container.loadBookmarks();
+ container.loadBookmarkListings();
}
- // reset inputs + render
- document.getElementById(containerId + "-url-input").value = "";
- document.getElementById(containerId + "-label-input").value = "";
- container.loadBookmarks();
- container.loadBookmarkListings();
- }
+ function reorderSection(buttonPressed, direction) {
+ let temp = buttonPressed.parentElement.parentElement.id.split("--");
+ let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
+ const sectionIndex = parseInt(temp[temp.length - 1]);
- function reorderSection(buttonPressed, direction) {
- let temp = buttonPressed.parentElement.parentElement.id.split("--");
- let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
- const sectionIndex = parseInt(temp[temp.length - 1]);
+ let copy = container.sections[sectionIndex];
+ if (direction == "up" && sectionIndex != 0) {
+ container.sections[sectionIndex] = container.sections[sectionIndex - 1];
+ container.sections[sectionIndex - 1] = copy;
+ } else if (direction == "down" && (sectionIndex + 1) != Object.keys(container.sections).length) {
+ container.sections[sectionIndex] = container.sections[sectionIndex + 1];
+ container.sections[sectionIndex + 1] = copy;
+ }
- let copy = container.sections[sectionIndex];
- if (direction == "up" && sectionIndex != 0) {
- container.sections[sectionIndex] = container.sections[sectionIndex - 1];
- container.sections[sectionIndex - 1] = copy;
- } else if (direction == "down" && (sectionIndex + 1) != Object.keys(container.sections).length) {
- container.sections[sectionIndex] = container.sections[sectionIndex + 1];
- container.sections[sectionIndex + 1] = copy;
+ container.loadBookmarks();
+ container.loadBookmarkListings();
}
- container.loadBookmarks();
- container.loadBookmarkListings();
- }
+ function deleteSection(buttonPressed) {
+ let temp = buttonPressed.parentElement.parentElement.id.split("--");
+ let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
+ const sectionIndex = parseInt(temp[temp.length - 1]);
- function deleteSection(buttonPressed) {
- let temp = buttonPressed.parentElement.parentElement.id.split("--");
- let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
- const sectionIndex = parseInt(temp[temp.length - 1]);
+ // delete section
+ let numSections = Object.keys(container.sections).length;
+ for (let i = sectionIndex; i < numSections; i++) {
+ container.sections[i] = container.sections[i+1];
+ }
+ // trim last section index that is no longer needed
+ delete container.sections[numSections - 1];
- // delete section
- let numSections = Object.keys(container.sections).length;
- for (let i = sectionIndex; i < numSections; i++) {
- container.sections[i] = container.sections[i+1];
+ // refresh screen
+ container.loadBookmarks();
+ container.loadBookmarkListings();
}
- // trim last section index that is no longer needed
- delete container.sections[numSections - 1];
-
- // refresh screen
- container.loadBookmarks();
- container.loadBookmarkListings();
- }
- function deleteLink(buttonPressed) {
- let temp = buttonPressed.parentElement.parentElement.id.split("--");
- let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
- const sectionIndex = parseInt(temp[temp.length - 2]);
- const linkIndex = parseInt(temp[temp.length - 1]);
-
- // delete link
- container.sections[sectionIndex].links.splice(linkIndex, 1);
+ function deleteLink(buttonPressed) {
+ let temp = buttonPressed.parentElement.parentElement.id.split("--");
+ let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
+ const sectionIndex = parseInt(temp[temp.length - 2]);
+ const linkIndex = parseInt(temp[temp.length - 1]);
+
+ // delete link
+ container.sections[sectionIndex].links.splice(linkIndex, 1);
- // refresh screen
- container.loadBookmarks();
- container.loadBookmarkListings();
- }
+ // refresh screen
+ container.loadBookmarks();
+ container.loadBookmarkListings();
+ }
- function reorderLink(buttonPressed, direction) {
- let temp = buttonPressed.parentElement.parentElement.id.split("--");
- let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
- const sectionIndex = parseInt(temp[temp.length - 2]);
- const linkIndex = parseInt(temp[temp.length - 1]);
- let links = container.sections[sectionIndex].links;
+ function reorderLink(buttonPressed, direction) {
+ let temp = buttonPressed.parentElement.parentElement.id.split("--");
+ let container = containerDataMap.get(temp[0].split("-section-listing")[0]);
+ const sectionIndex = parseInt(temp[temp.length - 2]);
+ const linkIndex = parseInt(temp[temp.length - 1]);
+ let links = container.sections[sectionIndex].links;
- // cut out section and re-insert into array
- let link = container.sections[sectionIndex].links[linkIndex];
- container.sections[sectionIndex].links.splice(linkIndex, 1);
- if (direction == "up" && linkIndex != 0) {
- links.splice(linkIndex - 1, 0, link);
- } else if (direction == "down" && linkIndex != links.length) {
- links.splice(linkIndex + 1, 0, link);
+ // cut out section and re-insert into array
+ let link = container.sections[sectionIndex].links[linkIndex];
+ container.sections[sectionIndex].links.splice(linkIndex, 1);
+ if (direction == "up" && linkIndex != 0) {
+ links.splice(linkIndex - 1, 0, link);
+ } else if (direction == "down" && linkIndex != links.length) {
+ links.splice(linkIndex + 1, 0, link);
+ }
+
+ // refresh screen
+ container.loadBookmarks();
+ container.loadBookmarkListings();
}
-
- // refresh screen
- container.loadBookmarks();
- container.loadBookmarkListings();
- }
-
- /************************************
- * CONTAINER CUSTOMIZATION HANDLERS *
- ************************************/
+
+ /************************************
+ * CONTAINER CUSTOMIZATION HANDLERS *
+ ************************************/
- function changeContainerBackground(colorChange) {
- let containerId = colorChange.currentTarget.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function changeContainerBackground(colorChange) {
+ let containerId = colorChange.currentTarget.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.backgroundRgba = hexToRgba(
- document.getElementById(containerId + "-settings-bg-color").value,
- document.getElementById(containerId + "-settings-bg-alpha").value
- );
+ container.settings.backgroundRgba = hexToRgba(
+ document.getElementById(containerId + "-settings-bg-color").value,
+ document.getElementById(containerId + "-settings-bg-alpha").value
+ );
- document.getElementById(containerId).style.backgroundColor =
- container.settings.backgroundRgba;
- }
+ document.getElementById(containerId).style.backgroundColor =
+ container.settings.backgroundRgba;
+ }
- function changeLinkColor(colorChange) {
- let containerId = colorChange.currentTarget.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function changeLinkColor(colorChange) {
+ let containerId = colorChange.currentTarget.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.linkColor = colorChange.target.value;
+ container.settings.linkColor = colorChange.target.value;
- let linkElements = document.getElementsByClassName(container.id + "-link");
- for (let i = 0; i < linkElements.length; i++) {
- linkElements[i].style.color = container.settings.linkColor;
+ let linkElements = document.getElementsByClassName(container.id + "-link");
+ for (let i = 0; i < linkElements.length; i++) {
+ linkElements[i].style.color = container.settings.linkColor;
+ }
}
- }
- function changeLinkSize(sizeChange) {
- let containerId = sizeChange.currentTarget.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function changeLinkSize(sizeChange) {
+ let containerId = sizeChange.currentTarget.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.linkSize =
- sizeChange.target.value == "" ? "0" : sizeChange.target.value;
+ container.settings.linkSize =
+ sizeChange.target.value == "" ? "0" : sizeChange.target.value;
- let linkElements = document.getElementsByClassName(container.id + "-link");
- for (let i = 0; i < linkElements.length; i++) {
- linkElements[i].style.fontSize = container.settings.linkSize + "px";
+ let linkElements = document.getElementsByClassName(container.id + "-link");
+ for (let i = 0; i < linkElements.length; i++) {
+ linkElements[i].style.fontSize = container.settings.linkSize + "px";
+ }
}
- }
- function toggleLinkDecor(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function toggleLinkDecor(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.linkDecor = checkboxChanged.target.checked;
+ container.settings.linkDecor = checkboxChanged.target.checked;
- let linkElements = document.getElementsByClassName(container.id + "-link");
- for (let i = 0; i < linkElements.length; i++) {
- linkElements[i].style.textDecoration = container.settings.linkDecor ?
- "underline" : "none";
+ let linkElements = document.getElementsByClassName(container.id + "-link");
+ for (let i = 0; i < linkElements.length; i++) {
+ linkElements[i].style.textDecoration = container.settings.linkDecor ?
+ "underline" : "none";
+ }
}
- }
- function toggleLinkBold(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function toggleLinkBold(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.linkBold = checkboxChanged.target.checked;
+ container.settings.linkBold = checkboxChanged.target.checked;
- let linkElements = document.getElementsByClassName(container.id + "-link");
- for (let i = 0; i < linkElements.length; i++) {
- linkElements[i].style.fontWeight = container.settings.linkBold ?
- "bold" : "normal";
+ let linkElements = document.getElementsByClassName(container.id + "-link");
+ for (let i = 0; i < linkElements.length; i++) {
+ linkElements[i].style.fontWeight = container.settings.linkBold ?
+ "bold" : "normal";
+ }
}
- }
- function toggleLinkItalic(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function toggleLinkItalic(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.linkItalic = checkboxChanged.target.checked;
+ container.settings.linkItalic = checkboxChanged.target.checked;
- let linkElements = document.getElementsByClassName(container.id + "-link");
- for (let i = 0; i < linkElements.length; i++) {
- linkElements[i].style.fontStyle = container.settings.linkItalic ?
- "italic" : "normal";
+ let linkElements = document.getElementsByClassName(container.id + "-link");
+ for (let i = 0; i < linkElements.length; i++) {
+ linkElements[i].style.fontStyle = container.settings.linkItalic ?
+ "italic" : "normal";
+ }
}
- }
- function changeSectionColor(colorChange) {
- let containerId = colorChange.currentTarget.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function changeSectionColor(colorChange) {
+ let containerId = colorChange.currentTarget.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.sectionColor = colorChange.target.value;
- let sectionElements = document.getElementsByClassName(container.id + "-section");
- for (let i = 0; i < sectionElements.length; i++) {
- sectionElements[i].style.color = container.settings.sectionColor;
+ container.settings.sectionColor = colorChange.target.value;
+ let sectionElements = document.getElementsByClassName(container.id + "-section");
+ for (let i = 0; i < sectionElements.length; i++) {
+ sectionElements[i].style.color = container.settings.sectionColor;
+ }
}
- }
- function changeSectionSize(sizeChange) {
- let containerId = sizeChange.currentTarget.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function changeSectionSize(sizeChange) {
+ let containerId = sizeChange.currentTarget.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.sectionSize =
- sizeChange.target.value == "" ? "0" : sizeChange.target.value;
+ container.settings.sectionSize =
+ sizeChange.target.value == "" ? "0" : sizeChange.target.value;
- let sectionElements = document.getElementsByClassName(container.id + "-section");
- for (let i = 0; i < sectionElements.length; i++) {
- sectionElements[i].style.fontSize = container.settings.sectionSize + "px";
+ let sectionElements = document.getElementsByClassName(container.id + "-section");
+ for (let i = 0; i < sectionElements.length; i++) {
+ sectionElements[i].style.fontSize = container.settings.sectionSize + "px";
+ }
}
- }
- function toggleSectionBold(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function toggleSectionBold(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- let sectionElements = document.getElementsByClassName(containerId + "-section");
- for (let i = 0; i < sectionElements.length; i++) {
- sectionElements[i].style.fontWeight = checkboxChanged.target.checked ? "bold" : "normal";
+ let sectionElements = document.getElementsByClassName(containerId + "-section");
+ for (let i = 0; i < sectionElements.length; i++) {
+ sectionElements[i].style.fontWeight = checkboxChanged.target.checked ? "bold" : "normal";
+ }
+ container.settings.sectionBold = checkboxChanged.target.checked;
}
- container.settings.sectionBold = checkboxChanged.target.checked;
- }
- function toggleSectionItalic(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function toggleSectionItalic(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- let sectionElements = document.getElementsByClassName(containerId + "-section");
- for (let i = 0; i < sectionElements.length; i++) {
- sectionElements[i].style.fontStyle = checkboxChanged.target.checked ? "italic" : "normal";
+ let sectionElements = document.getElementsByClassName(containerId + "-section");
+ for (let i = 0; i < sectionElements.length; i++) {
+ sectionElements[i].style.fontStyle = checkboxChanged.target.checked ? "italic" : "normal";
+ }
+ container.settings.sectionItalic = checkboxChanged.target.checked;
}
- container.settings.sectionItalic = checkboxChanged.target.checked;
- }
- // BORDER
- function changeContainerBorderWidth(borderChange) {
- let containerId = borderChange.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ // BORDER
+ function changeContainerBorderWidth(borderChange) {
+ let containerId = borderChange.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.borderWidth = borderChange.target.value;
+ container.settings.borderWidth = borderChange.target.value;
- if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
- document.getElementById(containerId).children[0].style.borderWidth =
- container.settings.borderWidth + "px";
- document.getElementById(containerId).children[1].style.borderWidth =
- container.settings.borderWidth + "px";
- }
- else {
- document.getElementById(containerId).style.borderWidth =
- container.settings.borderWidth + "px";
+ if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
+ document.getElementById(containerId).children[0].style.borderWidth =
+ container.settings.borderWidth + "px";
+ document.getElementById(containerId).children[1].style.borderWidth =
+ container.settings.borderWidth + "px";
+ }
+ else {
+ document.getElementById(containerId).style.borderWidth =
+ container.settings.borderWidth + "px";
+ }
}
- }
- function changeContainerBorderRadius(radiusChange) {
- let containerId = radiusChange.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function changeContainerBorderRadius(radiusChange) {
+ let containerId = radiusChange.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.borderRadius = radiusChange.target.value;
+ container.settings.borderRadius = radiusChange.target.value;
- if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
- document.getElementById(containerId).children[0].style.borderRadius =
- container.settings.borderRadius + "px";
- document.getElementById(containerId).children[1].style.borderRadius =
- container.settings.borderRadius + "px";
- }
- else {
- document.getElementById(containerId).style.borderRadius =
- container.settings.borderRadius + "px";
+ if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
+ document.getElementById(containerId).children[0].style.borderRadius =
+ container.settings.borderRadius + "px";
+ document.getElementById(containerId).children[1].style.borderRadius =
+ container.settings.borderRadius + "px";
+ }
+ else {
+ document.getElementById(containerId).style.borderRadius =
+ container.settings.borderRadius + "px";
+ }
}
- }
- function changeContainerBorderColor(colorChange) {
- let containerId = colorChange.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function changeContainerBorderColor(colorChange) {
+ let containerId = colorChange.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.borderColor = colorChange.target.value;
+ container.settings.borderColor = colorChange.target.value;
- if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
- document.getElementById(containerId).children[0].style.borderColor =
- container.settings.borderColor;
- document.getElementById(containerId).children[1].style.borderColor =
- container.settings.borderColor;
- }
- else {
- document.getElementById(containerId).style.borderColor =
- container.settings.borderColor;
+ if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
+ document.getElementById(containerId).children[0].style.borderColor =
+ container.settings.borderColor;
+ document.getElementById(containerId).children[1].style.borderColor =
+ container.settings.borderColor;
+ }
+ else {
+ document.getElementById(containerId).style.borderColor =
+ container.settings.borderColor;
+ }
}
- }
- // CLOCK
- function toggleDate(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ // CLOCK
+ function toggleDate(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.enableDate = checkboxChanged.target.checked;
- document.getElementById(containerId + "-date").style.display =
- checkboxChanged.target.checked ? "inline" : "none";
- }
- function toggleClock(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
-
- container.settings.enableClock = checkboxChanged.target.checked;
- document.getElementById(containerId + "-clock").style.display =
- checkboxChanged.target.checked ? "inline" : "none";
- }
- function changeHeaderColor(colorChange) {
- let containerId = colorChange.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.enableDate = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-date").style.display =
+ checkboxChanged.target.checked ? "inline" : "none";
+
+ if (!checkboxChanged.target.checked &&
+ Object.keys(container.sections).length > 0 &&
+ container.settings.enableClock
+ ) {
+ document.getElementById(containerId + "-header").style.marginBottom = "18px";
+ } else {
+ document.getElementById(containerId + "-header").style.marginBottom = "0px";
+ }
+ }
+ function toggleClock(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.headerColor = colorChange.target.value;
- document.getElementById(containerId + "-header").style.color =
- container.settings.headerColor;
- }
- function changeHeaderSize(sizeChange) {
- let containerId = sizeChange.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.enableClock = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-clock").style.display =
+ checkboxChanged.target.checked ? "inline" : "none";
- container.settings.headerSize =
- sizeChange.target.value == "" ? "0" : sizeChange.target.value;
- document.getElementById(containerId + "-header").style.fontSize =
- container.settings.headerSize + "px";
- }
- function toggleDateBold(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ if (!checkboxChanged.target.checked &&
+ Object.keys(container.sections).length > 0 &&
+ container.settings.enableDate
+ ) {
+ document.getElementById(containerId + "-header").style.marginBottom = "18px";
+ } else {
+ document.getElementById(containerId + "-header").style.marginBottom = "0px";
+ }
+ }
+ function changeHeaderColor(colorChange) {
+ let containerId = colorChange.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.dateBold = checkboxChanged.target.checked;
- document.getElementById(containerId + "-date").style.fontWeight =
- checkboxChanged.target.checked ? "bold" : "normal";
- }
- function toggleDateItalic(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.headerColor = colorChange.target.value;
+ document.getElementById(containerId + "-header").style.color =
+ container.settings.headerColor;
+ }
+ function changeHeaderSize(sizeChange) {
+ let containerId = sizeChange.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.dateItalic = checkboxChanged.target.checked;
- document.getElementById(containerId + "-date").style.fontStyle =
- checkboxChanged.target.checked ? "italic" : "normal";
- }
- function toggleClockBold(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.headerSize =
+ sizeChange.target.value == "" ? "0" : sizeChange.target.value;
+ document.getElementById(containerId + "-header").style.fontSize =
+ container.settings.headerSize + "px";
+ }
+ function toggleDateBold(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.clockBold = checkboxChanged.target.checked;
- document.getElementById(containerId + "-clock").style.fontWeight =
- checkboxChanged.target.checked ? "bold" : "normal";
- }
- function toggleClockItalic(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.dateBold = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-date").style.fontWeight =
+ checkboxChanged.target.checked ? "bold" : "normal";
+ }
+ function toggleDateItalic(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.clockItalic = checkboxChanged.target.checked;
- document.getElementById(containerId + "-clock").style.fontStyle =
- checkboxChanged.target.checked ? "italic" : "normal";
- }
+ container.settings.dateItalic = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-date").style.fontStyle =
+ checkboxChanged.target.checked ? "italic" : "normal";
+ }
+ function toggleClockBold(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- // DIVIDER
- function changeDividerColor(colorChange) {
- let containerId = colorChange.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.clockBold = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-clock").style.fontWeight =
+ checkboxChanged.target.checked ? "bold" : "normal";
+ }
+ function toggleClockItalic(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.settings.dividerColor = colorChange.target.value;
- let divider = document.getElementById(containerId + "-divider");
- // set multiple places for compatibility
- divider.style.color = container.settings.dividerColor;
- divider.style.backgroundColor = container.settings.dividerColor;
- divider.style.borderColor = container.settings.dividerColor;
- }
- function toggleDivider(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.clockItalic = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-clock").style.fontStyle =
+ checkboxChanged.target.checked ? "italic" : "normal";
+ }
- container.settings.enableDivider = checkboxChanged.target.checked;
- document.getElementById(containerId + "-divider").style.display =
- checkboxChanged.target.checked ? "block" : "none";
+ // DIVIDER
+ function changeDividerColor(colorChange) {
+ let containerId = colorChange.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- if (!checkboxChanged.target.checked && Object.keys(container.sections).length > 0) {
- document.getElementById(containerId + "-header").style.marginBottom = "18px";
- } else {
- document.getElementById(containerId + "-header").style.marginBottom = "0px";
- }
- }
+ container.settings.dividerColor = colorChange.target.value;
+ let divider = document.getElementById(containerId + "-divider");
+ // set multiple places for compatibility
+ divider.style.color = container.settings.dividerColor;
+ divider.style.backgroundColor = container.settings.dividerColor;
+ divider.style.borderColor = container.settings.dividerColor;
+ }
+ function toggleDivider(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- // GENERAL TEXT SETTINGS
- function changeContainerAlignment(alignmentChanged) {
- let containerId = alignmentChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ container.settings.enableDivider = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-divider").style.display =
+ checkboxChanged.target.checked ? "block" : "none";
- if (document.getElementById(containerId + "-settings-left-align").checked) {
- container.settings.textAlign = "left";
- document.getElementById(containerId).style.textAlign = "left";
- } else if (document.getElementById(containerId + "-settings-center-align").checked) {
- container.settings.textAlign = "center";
- document.getElementById(containerId).style.textAlign = "center";
- } else if (document.getElementById(containerId + "-settings-right-align").checked) {
- container.settings.textAlign = "right";
- document.getElementById(containerId).style.textAlign = "right";
+ if (!checkboxChanged.target.checked &&
+ Object.keys(container.sections).length > 0 &&
+ (container.settings.enableDate || container.settings.enableClock)
+ ) {
+ document.getElementById(containerId + "-header").style.marginBottom = "18px";
+ } else {
+ document.getElementById(containerId + "-header").style.marginBottom = "0px";
+ }
}
- }
- function changeFont(buttonClicked) {
- let containerId = buttonClicked.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ // GENERAL TEXT SETTINGS
+ function changeContainerAlignment(alignmentChanged) {
+ let containerId = alignmentChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- let input = document.getElementById(containerId + "-settings-font-input").value;
- if (input == "") {
- return;
- }
+ if (document.getElementById(containerId + "-settings-left-align").checked) {
+ container.settings.textAlign = "left";
+ document.getElementById(containerId).style.textAlign = "left";
+ } else if (document.getElementById(containerId + "-settings-center-align").checked) {
+ container.settings.textAlign = "center";
+ document.getElementById(containerId).style.textAlign = "center";
+ } else if (document.getElementById(containerId + "-settings-right-align").checked) {
+ container.settings.textAlign = "right";
+ document.getElementById(containerId).style.textAlign = "right";
+ }
- // parse input to extract name of font
- fontCode = input;
- fontName = fontCode.slice(fontCode.indexOf("family=") + 7);
- if (fontName.indexOf("&") != -1) {
- fontName = fontName.slice(0, fontName.indexOf("&") + 1);
}
- fontName = fontName.slice(0, fontName.indexOf(":")).replaceAll("+", " ");
- // set font on container
- document.head.insertAdjacentHTML("beforeend", fontCode);
- document.getElementById(containerId).style.fontFamily = fontName;
- document.getElementById(containerId + "-settings-font-name").innerHTML = fontName;
- container.settings.fontCode = fontCode;
- container.settings.fontName = fontName;
- }
+ function changeFont(buttonClicked) {
+ let containerId = buttonClicked.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- // SHADOW
- function changeContainerShadow(valueChanged) {
- let containerId = valueChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ let input = document.getElementById(containerId + "-settings-font-input").value;
+ if (input == "") {
+ return;
+ }
- container.settings.shadowX =
- document.getElementById(containerId + "-settings-shadow-x").value == ""
- ? 0
- : document.getElementById(containerId + "-settings-shadow-x").value;
- container.settings.shadowY =
- document.getElementById(containerId + "-settings-shadow-y").value == ""
- ? 0
- : document.getElementById(containerId + "-settings-shadow-y").value;
- container.settings.shadowBlur =
- document.getElementById(containerId + "-settings-shadow-blur").value == ""
- ? 0
- : document.getElementById(containerId + "-settings-shadow-blur").value;
- container.settings.shadowRgba = hexToRgba(
- document.getElementById(containerId + "-settings-shadow-color").value,
- document.getElementById(containerId + "-settings-shadow-alpha").value
- );
+ // parse input to extract name of font
+ fontCode = input;
+ fontName = fontCode.slice(fontCode.indexOf("family=") + 7);
+ if (fontName.indexOf("&") != -1) {
+ fontName = fontName.slice(0, fontName.indexOf("&") + 1);
+ }
+ fontName = fontName.slice(0, fontName.indexOf(":")).replaceAll("+", " ");
+ // set font on container
+ document.head.insertAdjacentHTML("beforeend", fontCode);
+ document.getElementById(containerId).style.fontFamily = fontName;
+ document.getElementById(containerId + "-settings-font-name").innerHTML = fontName;
+ container.settings.fontCode = fontCode;
+ container.settings.fontName = fontName;
+ }
- let shadow =
- container.settings.shadowX +
- "px " +
- container.settings.shadowY +
- "px " +
- container.settings.shadowBlur +
- "px " +
- container.settings.shadowRgba;
+ // SHADOW
+ function changeContainerShadow(valueChanged) {
+ let containerId = valueChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- // set shadow
- document.getElementById(containerId).style.boxShadow = shadow;
- }
+ container.settings.shadowX =
+ document.getElementById(containerId + "-settings-shadow-x").value == ""
+ ? 0
+ : document.getElementById(containerId + "-settings-shadow-x").value;
+ container.settings.shadowY =
+ document.getElementById(containerId + "-settings-shadow-y").value == ""
+ ? 0
+ : document.getElementById(containerId + "-settings-shadow-y").value;
+ container.settings.shadowBlur =
+ document.getElementById(containerId + "-settings-shadow-blur").value == ""
+ ? 0
+ : document.getElementById(containerId + "-settings-shadow-blur").value;
+ container.settings.shadowRgba = hexToRgba(
+ document.getElementById(containerId + "-settings-shadow-color").value,
+ document.getElementById(containerId + "-settings-shadow-alpha").value
+ );
- // ROTATION
- function changeContainerRotation(valueChanged) {
- let containerId = valueChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
-
- let rotation = valueChanged.target.value;
- let invertX = container.settings.invertX;
- let invertY = container.settings.invertY;
+ let shadow =
+ container.settings.shadowX +
+ "px " +
+ container.settings.shadowY +
+ "px " +
+ container.settings.shadowBlur +
+ "px " +
+ container.settings.shadowRgba;
- // save to container
- container.settings.rotation = rotation;
+ // set shadow
+ document.getElementById(containerId).style.boxShadow = shadow;
+ }
- // perform transformation
- let transformValue =
- `scale(${invertX ? `-1` : `1`}, ${invertY ? `-1` : `1`}) `;
- transformValue +=
- `rotate(${container.settings.rotation}deg)`;
-
- document.getElementById(containerId).style.transform = transformValue;
- }
+ // ROTATION
+ function changeContainerRotation(valueChanged) {
+ let containerId = valueChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
+
+ let rotation = valueChanged.target.value;
+ let invertX = container.settings.invertX;
+ let invertY = container.settings.invertY;
- // IMAGE INVERSION
- function toggleMirrorX(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ // save to container
+ container.settings.rotation = rotation;
- let invertX = checkboxChanged.target.checked;
- let invertY = container.settings.invertY;
+ // perform transformation
+ let transformValue =
+ `scale(${invertX ? `-1` : `1`}, ${invertY ? `-1` : `1`}) `;
+ transformValue +=
+ `rotate(${container.settings.rotation}deg)`;
+
+ document.getElementById(containerId).style.transform = transformValue;
+ }
- // save to container
- container.settings.invertX = invertX;
+ // IMAGE INVERSION
+ function toggleMirrorX(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- // perform transformation
- let transformValue =
- `scale(${invertX ? `-1` : `1`}, ${invertY ? `-1` : `1`}) `;
- transformValue +=
- `rotate(${container.settings.rotation}deg)`;
+ let invertX = checkboxChanged.target.checked;
+ let invertY = container.settings.invertY;
- document.getElementById(containerId).style.transform = transformValue;
-
- }
+ // save to container
+ container.settings.invertX = invertX;
- function toggleMirrorY(checkboxChanged) {
- let containerId = checkboxChanged.target.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ // perform transformation
+ let transformValue =
+ `scale(${invertX ? `-1` : `1`}, ${invertY ? `-1` : `1`}) `;
+ transformValue +=
+ `rotate(${container.settings.rotation}deg)`;
- let invertY = checkboxChanged.target.checked;
- let invertX = container.settings.invertX;
-
- // save to container
- container.settings.invertY = invertY;
+ document.getElementById(containerId).style.transform = transformValue;
+
+ }
- // perform transformation
- let transformValue =
- `scale(${invertX ? `-1` : `1`}, ${invertY ? `-1` : `1`}) `;
- transformValue +=
- `rotate(${container.settings.rotation}deg)`;
+ function toggleMirrorY(checkboxChanged) {
+ let containerId = checkboxChanged.target.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- document.getElementById(containerId).style.transform = transformValue;
- }
+ let invertY = checkboxChanged.target.checked;
+ let invertX = container.settings.invertX;
+
+ // save to container
+ container.settings.invertY = invertY;
- function toggleYoutubeAutoplay(checkbox) {
- let containerId = checkbox.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ // perform transformation
+ let transformValue =
+ `scale(${invertX ? `-1` : `1`}, ${invertY ? `-1` : `1`}) `;
+ transformValue +=
+ `rotate(${container.settings.rotation}deg)`;
- container.settings.autoplay = checkbox.checked;
- }
+ document.getElementById(containerId).style.transform = transformValue;
+ }
- // IMAGE HYPERLINKS
- function setImageHyperlink(button) {
- let containerId = button.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function toggleYoutubeAutoplay(checkbox) {
+ let containerId = checkbox.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- let input = document.getElementById(containerId + "-settings-image-hyperlink-input").value;
- if (input == "") {
- return;
+ container.settings.autoplay = checkbox.checked;
}
- document.getElementById(containerId + "-settings-image-hyperlink-input").value = "";
- if (container.imageHyperlink == undefined) {
- document.getElementById(containerId + "-settings-image-hyperlink-set-button")
- .insertAdjacentHTML("afterend", `
- <button id=${containerId + "-settings-image-hyperlink-remove-button"} onclick="removeImageHyperlink(this)">remove hyperlink</button>`);
+ // IMAGE HYPERLINKS
+ function setImageHyperlink(button) {
+ let containerId = button.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
+
+ let input = document.getElementById(containerId + "-settings-image-hyperlink-input").value;
+ if (input == "") {
+ return;
+ }
+ document.getElementById(containerId + "-settings-image-hyperlink-input").value = "";
+
+ if (container.imageHyperlink == undefined) {
+ document.getElementById(containerId + "-settings-image-hyperlink-set-button")
+ .insertAdjacentHTML("afterend", `
+ <button id=${containerId + "-settings-image-hyperlink-remove-button"} onclick="removeImageHyperlink(this)">remove hyperlink</button>`);
+ }
+ container.imageHyperlink = input;
+ document.getElementById(containerId).classList.add("hyperlinkedImage");
}
- container.imageHyperlink = input;
- document.getElementById(containerId).classList.add("hyperlinkedImage");
- }
- function removeImageHyperlink(button) {
- let containerId = button.id.split("-settings")[0];
- let container = containerDataMap.get(containerId);
+ function removeImageHyperlink(button) {
+ let containerId = button.id.split("-settings")[0];
+ let container = containerDataMap.get(containerId);
- container.imageHyperlink = undefined;
- document.getElementById(containerId).classList.remove("hyperlinkedImage");
- document.getElementById(containerId + "-settings-image-hyperlink-remove-button").remove();
- }
- /************************************
- * RESET / IMPORT & EXPORT HANDLERS *
- ************************************/
- function importData(buttonClick) {
- let input = document.getElementById("import-input").files[0];
- if (!input) {
- return;
+ container.imageHyperlink = undefined;
+ document.getElementById(containerId).classList.remove("hyperlinkedImage");
+ document.getElementById(containerId + "-settings-image-hyperlink-remove-button").remove();
}
+ /************************************
+ * RESET / IMPORT & EXPORT HANDLERS *
+ ************************************/
+ function importData(buttonClick) {
+ let input = document.getElementById("import-input").files[0];
+ if (!input) {
+ return;
+ }
- try {
- const reader = new FileReader();
- reader.onload = () => {
- let themeData = reader.result;
- themeData = JSON.parse(themeData);
- for (const [key, value] of Object.entries(themeData)) {
- localStorage.setItem(key, value);
- }
+ try {
+ const reader = new FileReader();
+ reader.onload = () => {
+ let themeData = reader.result;
+ themeData = JSON.parse(themeData);
+ for (const [key, value] of Object.entries(themeData)) {
+ localStorage.setItem(key, value);
+ }
- alert(
- "data import successful. " +
- "please refresh the page!" +
- "\n(you can ignore unsaved changes warning, the imported data has already been loaded + stored)"
- );
- justImported = true;
+ alert(
+ "data import successful. " +
+ "please refresh the page!" +
+ "\n(you can ignore unsaved changes warning, the imported data has already been loaded + stored)"
+ );
+ justImported = true;
+ }
+ reader.readAsText(input);
+ }
+ catch (error) {
+ console.log(error);
+ alert("please only enter data that was provided by the export button!");
}
- reader.readAsText(input);
- }
- catch (error) {
- console.log(error);
- alert("please only enter data that was provided by the export button!");
- }
-
- }
+
+ }
- /*****************
- * COLOR HELPERS *
- *****************/
+ /*****************
+ * COLOR HELPERS *
+ *****************/
- function hexToRgba(hex, alpha) {
- const sanitizedHex = hex.replace(/^#/, "");
- const parsedHex = parseInt(sanitizedHex, 16);
+ function hexToRgba(hex, alpha) {
+ const sanitizedHex = hex.replace(/^#/, "");
+ const parsedHex = parseInt(sanitizedHex, 16);
- return (
- "rgba(" +
- ((parsedHex >> 16) & 255) +
- "," +
- ((parsedHex >> 8) & 255) +
- "," +
- (parsedHex & 255) +
- "," +
- alpha / 100 +
- ")"
- );
- }
+ return (
+ "rgba(" +
+ ((parsedHex >> 16) & 255) +
+ "," +
+ ((parsedHex >> 8) & 255) +
+ "," +
+ (parsedHex & 255) +
+ "," +
+ alpha / 100 +
+ ")"
+ );
+ }
- function rgbToHex(rgb) {
- const toHex = (c) => {
- const hex = c.toString(16);
- return hex.length === 1 ? "0" + hex : hex;
- };
- return (
- "#" +
- toHex(parseInt(rgb[0])) +
- toHex(parseInt(rgb[1])) +
- toHex(parseInt(rgb[2]))
- );
- }
- </script>
+ function rgbToHex(rgb) {
+ const toHex = (c) => {
+ const hex = c.toString(16);
+ return hex.length === 1 ? "0" + hex : hex;
+ };
+ return (
+ "#" +
+ toHex(parseInt(rgb[0])) +
+ toHex(parseInt(rgb[1])) +
+ toHex(parseInt(rgb[2]))
+ );
+ }
+ </script>
+ </body>
</html>
diff --git a/themes/experiment.txt b/themes/experiment.txt
deleted file mode 100644
index b1bfd35..0000000
--- a/themes/experiment.txt
+++ /dev/null
@@ -1 +0,0 @@
-{"cursors":"{}","containerMapValues":"[{\"id\":\"container-2\",\"name\":\"horse clone\",\"x\":\"88px\",\"y\":\"322px\",\"height\":487,\"width\":690,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipart-library.com%2Fimages%2F5TRrgXbpc.gif&f=1&nofb=1&ipt=d33858e361adaf5dda2c98e4dcb165f4ed22a20915c3efe5cd201d7b0a6b3704\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,0.9)\",\"zIndex\":1,\"invertX\":false,\"invertY\":false}},{\"id\":\"container-1\",\"name\":\"image 2\",\"x\":\"928px\",\"y\":\"-10px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-3\",\"name\":\"test\",\"x\":\"136px\",\"y\":\"184px\",\"height\":337,\"width\":323,\"containerSettings\":{\"backgroundRgba\":\"rgba(255,255,255,.9)\",\"backgroundAlpha\":100,\"borderWidth\":\"5\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#c01c28\",\"sectionSize\":\"7\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#986a44\",\"linkSize\":\"16\",\"enableDate\":true,\"enableClock\":true,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":true,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"\",\"url\":\"\"}],\"label\":\"bingo\"},\"1\":{\"links\":[{\"label\":\"d\",\"url\":\"https://e\"}],\"label\":\"fs\"},\"2\":{\"links\":[{\"label\":\"ddd\",\"url\":\"https://ddd\"}],\"label\":\"fsd\"}},\"clockIntervalId\":2},{\"id\":\"container-4\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":4,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-5\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":5,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-6\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":6,\"invertX\":false,\"invertY\":true}}]","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-1\",\"3\":\"container-3\",\"4\":\"container-4\",\"5\":\"container-5\",\"6\":\"container-6\"}","audioLink":"\"\"","wallpaper":"\"https://i.imgur.com/3QYCOxV.jpeg\"","settingsMenuData":"{\"x\":\"1074px\",\"y\":\"191px\",\"width\":631,\"height\":458}","autoplayAudio":"false","activeTabId":"\"containerTab\""}
diff --git a/themes/experiment2.txt b/themes/experiment2.txt
deleted file mode 100644
index a524c7d..0000000
--- a/themes/experiment2.txt
+++ /dev/null
@@ -1 +0,0 @@
-{"cursors":"{}","containerMapValues":"[{\"id\":\"container-2\",\"name\":\"horse clone\",\"x\":\"88px\",\"y\":\"322px\",\"height\":487,\"width\":690,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipart-library.com%2Fimages%2F5TRrgXbpc.gif&f=1&nofb=1&ipt=d33858e361adaf5dda2c98e4dcb165f4ed22a20915c3efe5cd201d7b0a6b3704\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,0.9)\",\"zIndex\":1,\"invertX\":false,\"invertY\":false}},{\"id\":\"container-1\",\"name\":\"image 2\",\"x\":\"928px\",\"y\":\"-10px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-3\",\"name\":\"test\",\"x\":\"136px\",\"y\":\"184px\",\"height\":337,\"width\":323,\"containerSettings\":{\"backgroundRgba\":\"rgba(255,255,255,.9)\",\"backgroundAlpha\":100,\"borderWidth\":\"5\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#c01c28\",\"sectionSize\":\"7\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#986a44\",\"linkSize\":\"16\",\"enableDate\":true,\"enableClock\":true,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":true,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"\",\"url\":\"\"}],\"label\":\"bingo\"},\"1\":{\"links\":[{\"label\":\"d\",\"url\":\"https://e\"}],\"label\":\"fs\"},\"2\":{\"links\":[{\"label\":\"ddd\",\"url\":\"https://ddd\"}],\"label\":\"fsd\"}},\"clockIntervalId\":2},{\"id\":\"container-4\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":4,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-5\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":5,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-6\",\"name\":\"image 2 clone\",\"x\":\"938px\",\"y\":\"0px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":6,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-7\",\"name\":\"image 2 clone clone\",\"x\":\"948px\",\"y\":\"10px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":7,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-8\",\"name\":\"image 2 clone clone clone\",\"x\":\"958px\",\"y\":\"20px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":8,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-9\",\"name\":\"image 2 clone clone clone clone\",\"x\":\"968px\",\"y\":\"30px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":9,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-10\",\"name\":\"image 2 clone clone clone clone clone\",\"x\":\"978px\",\"y\":\"40px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":10,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-11\",\"name\":\"image 2 clone clone clone clone clone clone\",\"x\":\"988px\",\"y\":\"50px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":11,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-12\",\"name\":\"image 2 clone clone clone clone clone clone clone\",\"x\":\"998px\",\"y\":\"60px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":12,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-13\",\"name\":\"image 2 clone clone clone clone clone clone clone clone\",\"x\":\"1008px\",\"y\":\"70px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":13,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-14\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone\",\"x\":\"1018px\",\"y\":\"80px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":14,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-15\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1028px\",\"y\":\"90px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":15,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-16\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1038px\",\"y\":\"100px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":16,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-17\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1048px\",\"y\":\"110px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":17,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-18\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1058px\",\"y\":\"120px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":18,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-19\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1068px\",\"y\":\"130px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":19,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-20\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1078px\",\"y\":\"140px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":20,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-21\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1088px\",\"y\":\"150px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":21,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-22\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1098px\",\"y\":\"160px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":22,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-23\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1108px\",\"y\":\"170px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":23,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-24\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1118px\",\"y\":\"180px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":24,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-25\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1128px\",\"y\":\"190px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":25,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-26\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1138px\",\"y\":\"200px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":26,\"invertX\":false,\"invertY\":true}},{\"id\":\"container-27\",\"name\":\"image 2 clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone clone\",\"x\":\"1148px\",\"y\":\"210px\",\"height\":215,\"width\":951,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngmart.com%2Ffiles%2F21%2FHorse-Transparent-PNG.png&f=1&nofb=1&ipt=6b4b0aa64e46b02f1bce771af90be478c647b1c8673902c7feefebacd2dc790c\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":27,\"invertX\":false,\"invertY\":true}}]","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-1\",\"3\":\"container-3\",\"4\":\"container-4\",\"5\":\"container-5\",\"6\":\"container-6\",\"7\":\"container-7\",\"8\":\"container-8\",\"9\":\"container-9\",\"10\":\"container-10\",\"11\":\"container-11\",\"12\":\"container-12\",\"13\":\"container-13\",\"14\":\"container-14\",\"15\":\"container-15\",\"16\":\"container-16\",\"17\":\"container-17\",\"18\":\"container-18\",\"19\":\"container-19\",\"20\":\"container-20\",\"21\":\"container-21\",\"22\":\"container-22\",\"23\":\"container-23\",\"24\":\"container-24\",\"25\":\"container-25\",\"26\":\"container-26\",\"27\":\"container-27\"}","audioLink":"\"\"","wallpaper":"\"https://i.imgur.com/3QYCOxV.jpeg\"","settingsMenuData":"{\"x\":\"982px\",\"y\":\"380px\",\"width\":635,\"height\":462}","autoplayAudio":"false","activeTabId":"\"containerTab\""}
diff --git a/themes/green_moutains b/themes/green_moutains
deleted file mode 100644
index da31218..0000000
--- a/themes/green_moutains
+++ /dev/null
@@ -1 +0,0 @@
-{"activeTabId":"\"containerTab\"","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"bookmark layer 1\",\"x\":\"179px\",\"y\":\"160px\",\"height\":191,\"width\":241,\"containerSettings\":{\"backgroundRgba\":\"rgba(65,90,54,0.16)\",\"backgroundAlpha\":100,\"borderWidth\":\"2\",\"borderRadius\":\"0\",\"borderColor\":\"#000000\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#000000\",\"linkSize\":\"16\",\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"95\",\"shadowRgba\":\"rgba(47,52,63,0.18)\",\"zIndex\":1},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://youtube.com\"},{\"label\":\"/wg/\",\"url\":\"https://4chan.org/wg/\"},{\"label\":\"github\",\"url\":\"https://github.com\"}],\"label\":\"\"}},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"clock\",\"x\":\"1271px\",\"y\":\"374px\",\"height\":112,\"width\":213,\"containerSettings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"\",\"headerSize\":\"20\",\"headerBold\":false,\"headerItalic\":true,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2},\"sections\":{},\"clockIntervalId\":3}]","wallpaper":"\"https://i.imgur.com/K48zGBm.png\"","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-1\",\"2\":\"container-2\"}","audioLink":"\"\"","settingsMenuData":"{\"x\":\"493px\",\"y\":\"131px\",\"width\":648,\"height\":408}","autoplayAudio":"false","cursors":"{}"}
diff --git a/themes/modern_green.txt b/themes/modern_green.txt
new file mode 100644
index 0000000..5760952
--- /dev/null
+++ b/themes/modern_green.txt
@@ -0,0 +1 @@
+{"1148":"\\","2446":"\\","1849":",","312":"e","2353":"d","1710":":","1095":"\\","682":"\\","2117":"e","6":"a","698":"\"","324":"\"","1831":"\"","1100":"f","1449":"\\","2532":"B","2887":"\"","2492":"\\","1638":"u","373":"a","367":"i","173":",","290":",","1520":"w","1156":"1","1147":"r","241":":","2578":"\"","307":"\"","689":"w","1484":"w","502":"b","697":"\\","1559":",","1846":"e","2329":"k","1040":"h","1984":"k","1055":"d","2587":"n","1584":"\"","2020":"\\","2499":"\\","2487":"z","761":"o","88":":","622":"\"","299":"d","audioLink":"\"\"","1529":"\"","1537":"h","2159":"\\","1720":"/","1085":"r","2573":"e","2565":"\"","3124":"i","1192":"i","2308":"5","3035":"\"","3027":"a","2208":"\"","1451":"\\","3207":"g","642":"r","2588":"a","476":"t","1217":"o","1332":"o","2034":"g","768":"\\","81":"\"","3153":":","2231":"2","977":"\\","2849":"\"","2452":"\"","2320":")","1494":",","2101":"a","102":"e","1260":"l","1541":"w","1276":"\"","2319":"0","1754":",","705":"s","3066":"\"","903":"\"","496":":","915":"\\","2840":"\"","1647":"r","802":"s","815":",","162":"\"","3140":"i","1972":"\\","2713":":","33":"\"","1363":",","2654":"\\","2647":"7","513":"a","116":"w","1269":"\"","1684":"l","2316":"5","1740":"\"","1396":"l","204":"\"","2229":"\\","2933":"l","572":"s","3156":"\\","2462":"n","2566":"l","1733":"v","1901":"c","2648":"6","2290":"u","1571":")","2524":"\"","1813":"w","471":"c","350":"6","1909":"\\","1913":"\"","1657":"p","1200":"c","392":"\"","388":"o","1816":"g","1011":"r","960":"{","1121":"t","2070":"r","43":"-","325":":","2941":"}","2957":"\"","3135":"\"","2807":"\"","2815":"o","2306":"(","1061":"i","3113":"d","1478":"\"","1077":"r","927":"\"","214":"t","3211":"\"","1768":"s","399":",","387":"B","605":"d","1400":"\"","617":"\"","1961":"l","2877":",","2511":"l","2948":"l","2169":"d","2504":"t","2166":"\\","2415":"\\","2407":"\"","190":"d","1473":"t","1464":"n","1231":",","3143":"s","2014":"u","1009":"k","1785":"\"","304":"\\","950":"e","2473":"\\","335":"c","2162":"3","2174":"\"","1560":"2","1297":"e","2740":"l","1802":"\\","2604":"\\","2297":"\\","1666":"y","1238":"C","865":"n","1000":")","1418":"v","1951":"\"","959":":","2478":"s","2060":"\"","2724":"a","52":"m","1301":"e","983":"g","89":"\\","1163":"\\","2531":"n","883":"\\","2749":"i","899":"\\","1760":":","225":"\\","2793":"s","2004":"i","3073":"n","1958":"a","1612":"l","1608":":","2396":"o","59":"c","1308":"l","200":"0","1316":"a","990":",","527":"0","1346":"a","3011":"\"","1872":"e","3182":"0","1769":"\\","1676":"m","1220":"o","413":":","2164":",","2780":"\\","2202":"t","1428":"l","245":"\\","2761":"\\","1102":"n","2050":"\"","65":"\"","796":"s","2679":"e","5":"t","2976":"a","122":"\"","2726":"l","3105":"t","1993":"l","2832":"d","2366":"0","2751":"e","1778":"b","2892":"I","2614":"o","235":"d","2138":"\"","3237":"a","720":"r","736":",","664":"\\","1427":"a","676":"\\","1940":"o","2670":"\"","954":"n","1172":"S","491":"l","1285":"e","16":"l","3221":"u","1771":":","2137":"\\","3238":"l","3024":"o","423":"n","729":"2","3245":"u","679":"\\","2048":"{","3086":"d","352":"\"","832":"d","1687":"e","2143":"\"","152":"n","2155":"a","1500":"d","2086":"e","845":"\"","2090":"o","2429":"\"","1708":"\\","1352":"z","2983":"a","2869":"(","884":"\"","856":"e","1023":":","1438":"d","186":"r","2185":"2","198":":","1113":"\\","459":",","781":"o","2258":"t","3104":"c","2822":"\"","2099":"l","482":"\"","1701":"\"","2553":"l","2988":":","2127":"a","1248":"#","3054":"-","1556":"2","3046":"o","1431":",","3191":"i","928":":","593":"f","191":"A","1938":".","589":"r","456":"l","1517":"a","77":"7","447":"D","1335":"\"","2251":"6","280":"a","3168":"x","549":"s","2778":"\"","1856":"\"","3150":"t","2406":"\\","1629":"\\","1243":"\\","432":"\\","1255":"\\","264":"\\","75":"2","935":"w","1626":"b","940":"\\","771":"f","1893":"b","142":"\\","633":"\"","289":"\"","3064":":","2852":"a","2345":"0","2773":"l","1601":":","2765":",","1343":"\"","2627":"\"","2663":"i","1182":"6","439":"\\","717":":","1839":":","1441":"C","652":"o","3094":":","778":"\"","1325":"a","2693":"l","2913":"\\","149":"r","551":",","2859":"a","2441":"t","493":"r","2352":"r","1713":"h","1348":"e","1094":"y","681":",","2116":"=","1551":"r","1829":"{","1048":"\"","1832":"l","3250":"s","2888":",","2491":":","1637":"t","372":"f","2534":"l","2242":"e","172":"0","291":"\\","1521":"B","1157":"f","1146":"o","23":"[","1373":"o","306":"\\","3194":"h","688":"o","1487":"\"","503":"f","696":":","1558":"5","2326":"b","1041":"\\","305":"\"","2596":"\\","1054":"r","2580":"6","158":"\\","1583":"\\","2021":"\"","2498":",","2486":"i","760":"l","1882":"o","179":"\\","561":"t","2841":":","2029":"/","1534":"\\","1084":"o","2572":"z","2564":"\\","926":"\\","2550":"k","1193":"o","1549":"\\","3034":"\\","3026":"t","1385":"\\","1452":"\"","643":"\\","2589":"b","477":"r","1210":"\\","2037":"h","82":",","3152":"\"","3071":"a","2232":"2","970":"u","2848":"\\","2453":",","401":"\"","1497":"s","2102":".","1261":"i","1540":"o","1277":",","1755":"\\","3029":"n","902":"\\","2545":"\\","914":"x","1646":"u","805":"t","1887":",","816":"\\","161":"\\","3224":"p","1971":",","2712":"\"","2704":"r","32":"\\","1360":"6","2657":"e","1634":"y","1837":"\\","2640":"\"","1579":"n","2317":"5","2305":"a","3192":"d","205":"b","2207":"\\","1208":"e","1019":"h","2934":"I","968":"r","2078":"t","1732":"t","2289":"o","2649":"7","1570":"0","1387":"h","1812":"w","218":":","3219":"\"","1914":"u","1656":"t","1201":"\\","391":"\\","1010":"g","578":"n","1138":"c","1122":"C","2468":"\\","42":"r","2940":"7","2956":":","2804":"\"","2812":"h","2307":"2","1066":":","1074":"\"","215":"h","3210":"\\","2735":"\\","3115":":","740":")","386":"n","755":"1","374":"l","604":"i","1407":",","616":"\\","384":"i","2876":"5","2403":"l","2516":":","2507":"n","2414":"y","3001":"d","1472":"f","1465":"\\","3160":"\"","1230":"e","2015":"r","402":"l","1008":"c","1784":"\\","951":"t","2470":":","3117":"\\","332":"\"","1082":"o","2669":"\\","2163":"}","535":"a","132":"t","2175":"c","1563":",","1294":"a","2741":"s","2924":"c","1665":".","864":"\"","876":"o","1003":",","1417":"i","1950":"\\","2479":"e","2063":"n","2727":"e","51":"a","1300":"\"","2685":"o","982":"r","1162":",","1421":"e","3019":"\"","880":"r","2375":"d","87":"\"","896":"9","1761":"{","226":"\"","2792":"\"","2005":"t","3074":"e","879":"a","1613":"i","1609":"{","2397":"r","58":"\"","1315":"f","989":"5","2485":"S","1513":"\\","1169":"i","3010":"a","1875":"o","2993":"s","1675":"o","1223":"\\","2799":"X","412":"\"","1033":"d","256":"C","244":"0","1103":"t","2053":"b","1606":"\\","66":",","791":"\"","2678":"h","4":"n","2975":"e","123":":","1990":"{","2833":"o","2365":"\"","2752":"r","1108":"\\","1779":"e","2615":"c","2542":"s","2998":"z","3230":"d","777":"\\","721":"g","737":"0","667":"h","1426":"f","2216":"6","671":"w","2269":"s","3180":"1","1508":"\"","1171":"n","2437":"\"","17":"u","1865":":","2603":",","1772":"[","2136":"2","3239":"s","3227":"y","464":"a","2017":"\\","3244":"c","678":"0","1631":":","2380":"d","353":",","789":"c","833":"\\","2144":"c","2262":":","153":"d","2156":"l","2300":"\\","1501":"o","2087":"v","985":"a","2091":"p","2428":"\\","1709":"\"","1353":"e","2980":"l","429":"\\","851":"n","1022":"\"","1439":"e","187":"o","3112":"I","2182":"e","199":"1","1114":"\"","2042":"o","358":"c","780":"l","3255":"}","2683":"r","2259":"h","541":"l","2821":"\\","483":"h","1852":"u","1702":",","2552":"o","2989":"\"","2126":"l","3055":"3","3047":"n","1432":"\\","188":"u","590":"\\","192":"l","1939":"g","586":"i","457":"s","78":"p","446":"e","1334":"\\","2252":",","281":"m","3169":"\\","548":"l","1857":":","3118":"\"","1242":"r","431":":","1254":"c","263":":","922":"i","1593":"c","934":"\"","1627":"e","368":"c","1892":"a","141":"{","559":"r","2851":"h","2344":"1","2772":"A","315":"i","2764":"\"","1340":"\"","2636":"l","2620":"f","1183":"\\","438":",","1821":".","2337":"l","714":"a","1442":"o","653":"w","1921":"\"","2880":"5","1324":"e","2692":"a","2914":"\"","148":"g","550":"e","2858":"b","2440":"n","1847":"\\","2351":"o","1712":"\"","1349":"r","680":"\"","2115":"l","1550":"\"","1828":",","1049":",","34":"c","1833":"a","2250":"4","2889":"\\","2490":"\"","1636":"u","371":":","2243":"i","171":",","296":"t","569":"f","1145":"l","22":"\"","1370":"e","1486":"\\","504":"b","695":"\"","2327":"a","2277":"\\","1046":"0","2597":"\"","1057":"r","272":",","2581":"\\","3175":"\\","1582":"x","234":"a","1218":"n","90":"\"","763":"k","1881":"c","2904":"\"","624":"e","178":",","560":"I","978":"\"","3173":"\"","1535":"\"","147":"k","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"clock\",\"x\":\"248px\",\"y\":\"147px\",\"height\":180,\"width\":321,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"#51921c\",\"headerSize\":\"80\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":1,\"clockBold\":true},\"sections\":{},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"date\",\"x\":\"248px\",\"y\":\"214px\",\"height\":162,\"width\":182,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":true,\"enableClock\":false,\"headerColor\":\"#47791f\",\"headerSize\":\"18\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"clockBold\":false,\"dateItalic\":false},\"sections\":{},\"clockIntervalId\":3},{\"id\":\"container-3\",\"name\":\"bookmarks\",\"x\":\"245px\",\"y\":\"241px\",\"height\":443,\"width\":82,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#51921c\",\"sectionSize\":\"0\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#51921c\",\"linkSize\":\"16\",\"linkDecor\":false,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://www.youtube.com\"},{\"label\":\"twitch\",\"url\":\"https://www.twitch.tv\"}],\"label\":\"1\"},\"1\":{\"links\":[{\"label\":\"gmail\",\"url\":\"https://www.gmail.com\"},{\"label\":\"drive\",\"url\":\"https://drive.google.com\"},{\"label\":\"calendar\",\"url\":\"https://calendar.google.com\"}],\"label\":\"2\"},\"2\":{\"links\":[{\"label\":\"github\",\"url\":\"https://www.github.com\"},{\"label\":\"mdn\",\"url\":\"https://developer.mozilla.org/en-US/?hl=en\"}],\"label\":\"3\"}},\"clockIntervalId\":4}]","1722":"w","1379":"f","107":"\\","2567":"i","1190":"c","1548":":","3037":"\\","3021":"\\","1384":",","1453":",","2196":"\"","640":"t","824":"n","1568":".","474":"\"","1211":"\"","2036":"t","83":"\\","2711":"\\","169":",","2233":"9","3147":"u","971":"n","2450":"\"","1368":"a","362":"n","1496":"\"","2103":"o","514":"d","111":"5","1266":"z","1543":"g","1274":"6","1756":"\"","1747":"\"","1391":"e","905":"\\","917":",","1645":"\"","804":"c","3121":"n","208":"d","817":"\"","1502":"w","160":":","1970":"}","3185":"\\","2715":"a","2707":"a","31":":","1361":"\\","2281":"\\","2641":":","1578":"I","2314":",","3193":"t","1902":"a","206":"o","1209":",","1018":"p","2935":"d","570":"a","1130":"\"","2460":"i","2079":"t","322":"r","2288":"r","3132":"\"","2862":":","1164":"\"","1573":"\"","1815":".","3218":",","1915":"r","753":"\"","1655":"t","1202":"\"","390":"d","748":"n","2215":"2","1013":"u","1968":"\\","579":"a","1123":"o","2469":"\"","41":"e","2947":"a","2955":"\"","2805":"0","2813":"a","2304":"b","3009":"t","1067":"\\","1075":"b","3206":"i","216":"\\","3217":"\"","741":"\\","385":"o","1031":"o","607":"r","1406":"e","611":"o","1967":"1","2875":"5","2517":"f","2506":"o","2417":",","2818":"\\","3000":"n","1805":"t","770":":","1475":"\"","1576":"\"","1466":"\"","2376":"e","1233":"\"","403":"i","3229":"u","1783":":","2056":"\\","952":"t","2471":"\\","3176":"\"","908":"\\","333":"s","2668":":","534":"e","2509":"t","2176":"o","1562":"5","2426":"m","1295":"l","888":"x","2742":"e","962":"\"","1793":",","1664":"w","2922":"l","867":"m","871":":","1002":"\"","488":"r","1416":"D","920":"h","2062":"d","50":"n","754":":","2276":"s","981":"\"","138":"\\","997":"5","520":"e","3018":"\\","1723":"w","881":"k","716":"\"","897":"p","1762":"\\","949":"s","227":"b","2791":"\\","2002":"\"","3075":"r","2787":"r","2205":"\"","878":"m","1610":"\\","2390":"\\","343":"e","2274":"n","1314":":","988":"5","2541":"l","852":"t","1512":",","1168":"t","1649":"\\","3013":"\"","1874":"g","2990":"f","2708":"l","1674":"c","1222":"d","2798":"w","411":"\\","1032":"r","1930":"c","255":"r","2192":"a","243":"\"","3083":"\"","1619":":","2052":"a","1607":"\"","67":"\\","790":"\\","3":"o","2974":"p","120":"h","1179":"\\","1991":"\\","2830":"h","1282":"a","2364":"\\","2753":"C","2616":"k","237":"u","2999":"I","3231":"i","3109":"T","726":"5","734":"5","1799":"\\","666":"s","1425":":","1946":"c","2388":"\"","2732":"d","68":"\"","2522":",","1509":"0","1170":"o","2436":"\\","14":"V","2420":"f","1864":"s","2488":"e","1773":"{","3122":"t","2135":"\"","421":"l","859":"3","3243":"\"","1792":"\"","2381":"i","3028":"i","788":"i","2145":"l","2263":"1","150":"o","2157":"I","128":"\\","2088":"e","3249":"r","2092":"e","1350":"S","2981":"l","3205":"e","428":"e","850":"o","1025":"0","2032":"w","180":"\"","1007":"a","2183":"r","598":",","1931":"a","1115":",","2177":"n","70":"\\","359":"t","783":"k","2682":"e","2963":"1","2158":"d","540":"o","2820":":","484":"e","2227":"\"","1703":"\\","2555":"r","2125":"\"","3056":"\\","655":"\\","3040":"\\","2842":"\\","1433":"\"","189":"n","591":"\"","193":"p","587":"d","454":"f","79":"x","441":"e","2533":"o","2253":"\\","3166":"0","1854":"l","2628":"h","1245":":","430":"\"","1257":",","3234":":","1929":"/","262":"\"","1592":"e","937":"d","1624":"l","369":"\\","1891":"l","140":":","558":"e","2850":"s","2448":":","494":"\\","2775":"g","2359":"t","2767":"\"","1341":",","1093":"e","2621":"a","1695":"w","3068":"o","1820":"l","840":"\\","715":"\\","2119":"\\","1443":"l","650":"a","1922":"h","2881":",","1599":"\\","379":"\"","2867":"b","1323":"h","2695":"e","2915":":","1526":"\"","553":"\"","3149":"a","2443":"o","1844":"i","1510":"\\","2350":"b","301":"\\","2114":"h","1553":"b","2595":"e","2660":"e","1834":"b","751":"x","2026":"s","1635":"o","98":",","370":"\"","1889":"\\","170":"0","297":"C","568":":","1144":"o","21":":","1371":"r","1489":"\\","505":"c","694":"\\","2324":"\\","1047":"\\","2598":":","1056":"e","648":"s","271":"\"","2582":"\"","1581":"e","2271":"t","1518":"d","1219":"B","91":"1","762":"c","1880":".","2905":"s","627":"A","563":"l","979":":","2458":"c","925":"t","28":"d","2574":"\\","104":"g","119":"t","1191":"t","3036":",","3080":"}","3020":":","703":"\\","1454":"\\","641":"e","475":":","1212":"s","2198":"\\","463":"n","168":"0","2234":"p","316":"o","1978":"{","972":"d","2451":"\\","39":"i","212":"i","1369":"d","1089":"\\","2104":"r","515":"e","110":"1","1267":"e","1542":"R","364":"t","1275":"\\","1757":"1","1746":"\\","1390":"d","904":"y","916":"\"","2666":"\\","1411":"n","1644":"\\","807":"o","468":"C","810":"\\","2714":"f","1985":"s","30":"\"","2659":"d","2280":"{","2642":"\\","2315":"2","1758":"\\","1903":"l","207":"r","919":"\"","2224":"\"","2936":"\\","571":"l","1131":"\\","2461":"o","49":"\"","2709":"i","323":"\\","3133":"\"","2890":"\"","1572":"\\","1814":"w","2673":"\\","1916":"l","1654":"h","1203":":","749":"d","1012":"o","2222":",","619":"\"","963":"b","2073":"\"","40":"n","328":"\\","2954":"r","2847":",","2810":"\"","3008":"a","1064":"\\","1021":"\\","1072":",","217":"\"","64":"\\","3216":"}","3127":"r","1738":",","2012":"\\","746":"z","2571":"i","2926":"I","606":"e","1405":"s","55":"\"","1966":"\"","1685":"a","2874":"2","1947":"o","2514":"\\","847":"\\","2501":"s","3103":"a","2416":"\"","2819":"\"","2400":"r","3003":"x","1804":"h","1474":"\\","2602":"e","1467":":","2434":"\"","1232":"\\","400":"\\","1782":"\"","1957":"l","953":"i","2525":"s","1307":"C","330":",","1372":"B","537":"e","2508":"I","130":"s","528":"\\","1292":":","889":"\\","489":"C","2":"c","2609":"b","1398":"c","866":"a","870":"\"","1005":"\"","1789":"i","1415":"e","3062":"\\","2398":"d","2721":"\"","2662":"S","980":"\\","139":"\"","996":"5","521":"\\","1160":"\\","381":"e","2404":"o","886":"\\","894":"1","1763":"\"","228":"o","2790":",","2003":"g","419":"\\","3076":"-","2786":"e","2204":"\\","3253":"\"","1611":"\"","3063":"\"","2391":"\"","340":"S","798":"}","3110":"a","1983":"n","1999":"\"","1515":"s","3012":":","2661":"r","1877":"g","2991":"a","636":"\"","1673":".","1225":":","410":"r","2811":"s","1791":"\\","254":"e","2211":"\"","2193":"m","242":"\\","2055":"l","1604":"\"","60":"l","793":"f","2973":"e","121":"\\","1988":":","1178":":","1996":"e","2831":"a","1283":"b","2363":":","2754":"o","7":"i","2617":"\\","519":"z","3232":"o","727":"5","735":"5","1798":"l","669":"d","1424":"\"","673":"\\","1945":".","2838":"r","2389":"0","2733":"e","69":"x","2675":",","2523":"\\","573":"e","1399":"\\","1506":":","2080":"p","2439":"o","2423":"t","1867":"/","1358":"\"","2134":"\\","1262":"n","1979":"\\","420":"\"","858":"-","3242":",","2045":"\"","2382":"u","351":"\\","2146":"o","516":"r","151":"u","2150":"n","2828":"\"","2089":"l","2093":"r","1351":"i","2986":"r","704":"\"","564":"i","3048":"t","1024":"1","181":"b","2180":"i","599":"\\","1932":"l","1116":"\\","2893":"n","71":"\"","449":"t","782":"c","1333":"r","2962":"4","286":"\\","543":"\\","2827":"\\","485":"a","1704":"\"","2554":"o","2124":"\\","61":"o","1394":"t","3057":"\"","3041":"\"","1434":"d","596":"s","194":"h","584":"i","455":"a","361":"o","1899":"\\","1775":"\"","2530":"o","3171":",","2254":"\"","3167":"p","1099":"\"","1855":"\\","1735":"\"","2629":"e","1188":"s","1244":"\"","437":"\"","1256":"\"","848":"\"","1680":",","674":"\"","658":"\\","261":"\\","1591":"s","936":"i","3092":"k","1625":"a","826":"e","772":"a","1158":"3","2342":"\"","495":"\"","317":"n","2358":"d","2766":"\\","1715":"t","1092":"r","687":"d","2622":"l","1181":"1","1823":"o","841":"\"","2335":"d","2520":"s","651":"d","1923":"t","2882":".","1598":"s","2497":"\"","2894":"d","378":"\\","1236":"n","1322":"\"","2694":"s","2244":"g","2916":"{","1527":":","552":"\\","1151":"\\","2349":"\"","1845":"v","2357":"i","300":"e","1481":"a","1552":"g","1835":"e","279":"N","1589":"\\","2027":":","99":"\\","1888":"{","3157":"\"","2401":"C","2296":"a","177":"\"","294":"o","1532":"\"","3241":"\"","2165":"{","20":"\"","1376":"\\","3129":"a","1488":":","506":"\\","1199":"i","943":"2","2325":"\"","1044":"\\","2599":"t","1051":"\"","649":"h","2583":",","1580":"d","92":"1","2031":"w","765":"o","84":"\"","2906":"e","626":"t","562":"a","2846":"\"","2459":"t","2336":"A","634":":","1724":".","1081":"C","2577":"\\","1499":"a","2561":"\\","118":"d","1196":"t","3039":"2","3023":"c","702":",","1386":"\"","1455":"\"","646":"\\","1030":"b","460":"\\","818":"c","167":"(","2235":"x","3145":"e","1977":":","973":"R","2456":"s","38":"a","1366":"h","2651":"\\","1088":":","1490":"\"","2105":"g","113":",","1264":"S","2535":"d","1272":"\"","1750":"\"","1389":"a","1745":"l","1393":"I","907":":","911":"6","2266":",","806":"i","469":"l","811":"\"","2717":"s","2701":"a","2658":"a","2287":"g","2643":"\"","2295":"b","877":"k","1759":"\"","3195":"\\","918":"\\","397":"s","2225":"y","2937":"\"","1132":"\"","1124":"d","48":"\\","320":"l","3130":"b","2802":":","3101":",","1575":"\\","1817":"m","2072":"\\","1917":"\\","1653":"\"","1204":"f","3065":"\\","3187":",","618":"\\","964":"a","620":",","2074":":","47":",","2945":"\"","repeatWallpaper":"false","2953":"e","1693":"\"","1886":"}","2408":":","1065":"\"","3225":"l","1073":"\\","210":"r","3215":"9","2013":"\"","747":"I","756":",","1404":"l","613":"\\","1965":"\\","2873":",","338":"o","2515":"\"","2500":"\"","1565":"5","3002":"e","1807":"p","1477":"\\","1078":"d","1460":"A","2706":"t","3226":"a","1663":"w","1161":"\"","2018":"\"","2247":"\\","2302":"r","1781":"\\","1956":"\"","2477":"\"","2065":"\"","2729":"i","57":"\\","1306":"e","219":"\\","536":"d","131":"e","529":"\"","1293":"f","2373":"o","2608":"a","220":"\"","3183":"p","869":"\\","873":"\"","1004":"\\","1788":"a","2399":"e","2720":"\\","348":"\"","1313":"\"","987":"2","539":"B","230":"d","995":"2","522":"\"","1167":"c","2637":"o","887":"\"","895":"5","1764":"l","229":"r","3154":"\"","2797":"o","2000":":","3077":"2","2785":"t","1035":"r","2219":"x","3252":":","1105":"a","2392":",","341":"i","944":"9","3111":"b","1980":"\"","1748":":","2839":"\\","3015":"\\","1876":"o","3220":"a","238":"s","1672":"e","2195":"\\","1224":"\"","417":"\"","433":"\"","1790":"l","661":"\\","2210":"\\","2190":"\"","2236":"\\","2054":"e","2925":"k","1605":"0","792":":","1890":"\"","2972":"r","1989":"[","1997":"l","1280":"e","2362":"\"","2755":"l","1774":"\\","2618":"\"","3233":"\"","1826":"\"","724":"(","732":",","668":"a","672":"Y","1944":"e","248":"\\","2730":"v","835":":","2674":"\"","2264":"5","1507":"\\","2081":"s","2438":"f","1015":"d","12":"a","1866":"/","1359":"1","2463":"C","2544":",","499":"#","2484":"n","2188":",","2044":"\\","2383":"s","1137":"e","2147":"c","156":"b","2151":"t","1869":"r","1356":":","2987":"\"","3049":"a","1027":",","182":"a","2181":"n","1933":"e","1117":"\"","1109":"\"","72":":","448":"a","785":"t","2538":":","2961":"2","287":"\"","542":"d","2826":",","486":"d","1705":"u","2557":"\"","2123":",","625":"x","3042":":","1414":"l","1435":"i","269":"y","597":"e","195":"a","585":"v","1696":"i","366":"l","443":"a","1339":"\\","2255":"w","3164":"6","2857":"g","2630":"a","1189":"e","1247":"\"","436":"\\","1251":"b","849":"c","1444":"o","659":"\"","260":"r","1590":"\"","2200":"d","3091":"n","827":"r","1159":"1","2341":"\\","2777":"\\","2860":"\\","308":",","1091":"g","686":"a","2113":"?","2623":"s","1697":"t","1822":"c","846":":","713":"b","133":"t","2883":"9","2496":"\\","2895":"e","377":",","1920":"\\","2697":"\\","2245":"h","2917":"}","1524":"r","3093":"\"","1152":"\"","1143":"C","2348":"\\","1842":"d","319":"o","2356":"W","303":":","1480":"h","693":"r","1555":"(","2591":"e","1059":"a","278":"t","3184":"x","1588":",","2024":"t","3119":"c","1633":"\"","2039":"b","2483":"o","176":"\\","295":"n","53":"e","1618":"\"","1533":",","27":"i","1377":"\"","2569":"k","507":"\"","3031":"r","2322":"\"","1045":"\"","1050":"\\","277":"n","2612":"C","472":"k","93":"2","2030":"w","764":"B","85":"y","684":"s","2907":"c","629":"i","3116":"\"","565":"c","2845":"\\","1727":"i","1080":"r","2576":":","1498":"h","2560":"\"","3123":"a","1197":"a","1545":"a","3038":"\"","3022":"\"","1381":"l","1456":"t","647":"\"","3084":"a","1643":",","461":"\"","819":"l","166":"a","2908":"t","3144":"M","1976":"\"","418":",","37":"t","1367":"e","2650":"b","1493":"\"","2106":"/","825":"t","112":"9","1265":"i","1273":"1","2312":"5","1751":"\\","1388":"e","1744":"e","1392":"r","1904":"e","906":"\"","910":"2","812":":","576":"\"","2466":"o","2716":"l","1737":"]","2286":"k","3138":"t","2294":"g","614":"\"","1278":"\\","2696":",","396":"l","3085":"u","2226":"\\","2938":":","1133":",","1125":"e","321":"o","3131":"\\","2803":"\\","1574":",","1104":"N","3200":"3","1652":"\\","1205":"a","773":"l","383":"t","601":"d","965":"c","2075":"\\","46":"\"","2944":",","2952":"p","2808":",","2411":"g","3120":"o","209":"e","2303":"g","1070":"\\","1468":"\\","3214":"2","458":"e","1235":"i","1659":":","2010":"\"","409":"o","744":"\\","2920":"\"","612":"r","1964":":","2872":"5","422":"i","339":"n","2503":"c","2959":"\"","2178":"t","1564":"2","1998":"\\","2744":"\\","2402":"o","1806":"t","1476":",","2600":"r","1461":"l","1662":"w","861":"\"","2019":":","1780":"l","1714":"t","1955":"\\","2474":"\"","2064":"\\","2728":"D","56":":","1305":"l","1079":"e","2665":"e","2167":"\"","106":"t","136":"g","909":"\"","2171":"\"","1290":"\\","2372":"b","2700":"e","221":"0","2008":"b","1669":"t","2863":"\\","868":"e","3189":"\"","872":"\\","1413":"b","1616":"s","2723":"n","349":"1","1312":"\\","986":"(","538":"r","994":",","523":":","1166":"e","1688":"l","2379":"a","159":"\"","892":"\\","1765":"i","2996":",","842":"i","2796":"d","2001":"\\","3078":"\\","2784":"n","1034":"e","2206":",","253":"d","2218":"p","3251":"\"","1106":"m","2431":"\\","2393":"\\","346":":","9":"e","126":"3","2836":"l","1288":"t","3014":"{","1995":"b","354":"\\","2610":"l","239":"\\","3177":":","1671":"b","1227":"a","416":"\\","1797":"r","660":"0","1423":"\\","2213":"\\","2191":"n","240":"\"","2421":"o","2057":"\"","2738":"f","62":"c","2528":"t","0":"{","2971":"\"","1176":"\\","2430":":","96":"\\","1281":"n","2361":"\\","2756":"o","923":"g","2619":":","232":"r","2133":":","427":"z","725":"2","2409":"\\","733":"2","2964":"f","356":"s","836":"2","2677":"\"","2265":"3","1504":"\\","2082":":","3203":"\"","2094":".","13":"p","1861":"t","2273":"i","738":".","2189":"\\","3240":"e","1648":"l","1150":":","2047":",","2384":"\\","3081":"\"","750":"e","2684":"B","2969":"\"","2148":"k","157":"a","2152":"e","18":"e","1868":"d","1357":"\\","2984":"p","3050":"i","1177":"\"","183":"c","1934":"n","452":"\"","314":"t","73":"\\","784":"I","2539":"f","2960":"#","284":"\"","545":":","2825":"\"","487":"e","2638":"r","1706":"r","1362":"\"","2556":"\\","2122":"]","1259":"\"","3043":"\\","1436":"v","268":"e","594":"a","196":"\\","939":"h","582":"e","3099":"\"","1622":"\\","775":"e","1897":"\"","146":"c","2256":"i","637":"c","3165":"8","794":"a","2856":"R","2769":"e","1347":"d","2631":"d","3052":"e","2129":"e","1186":"\\","1246":"\\","435":"6","1689":"\\","1250":"0","2332":"o","1445":"r","656":"\"","1924":"t","3248":"o","1597":"n","930":"4","3090":"i","828":"v","1329":"C","2209":"x","638":"e","555":"e","1326":"d","2445":"e","2776":"n","311":"s","2035":"i","2760":":","1090":"\"","685":"h","2112":"/","2170":"\\","2261":"\"","1682":"\\","710":"w","2884":"0","2495":"6","2896":"x","610":"l","2220":"\\","376":"e","1320":",","2246":"t","1525":"\\","1153":"#","1142":"n","318":"C","1184":"\"","2355":"r","302":"\"","3179":"\"","1483":"o","692":"u","1554":"a","1830":"\\","2592":"D","1058":"R","2584":"\\","1587":"}","2025":"p","1632":"\\","2038":"u","2482":"i","1355":"\"","621":"\\","175":")","2829":"s","1530":"0","1213":"e","26":"\"","1374":"l","2568":"n","508":",","3030":"e","2743":",","2323":",","1053":"o","276":"o","3228":"A","1969":"\"","473":"\\","1214":"c","94":"p","2033":".","767":"d","86":"\\","2900":"3","628":"l","1858":"\\","974":"g","2844":"0","1726":"w","103":"i","743":",","2563":",","1194":"n","1544":"b","2422":"n","1180":"\"","700":"\\","1380":"a","1457":"e","644":"\"","478":"u","801":"\"","3155":"{","165":"b","2909":"i","924":"h","1975":"\\","2454":"\\","36":"n","1364":"\\","2653":",","108":"\"","2644":"#","2107":"e","510":"\"","115":"\"","1270":":","2313":"5","1752":"\"","712":"g","1743":"b","1395":"a","1905":"n","201":"0","913":"p","1429":"s","813":"{","2930":"r","577":"e","2467":"r","2719":",","2703":"e","1736":"}","853":"a","2285":"c","3139":"t","2293":"R","1279":"\"","3208":"h","3197":":","1910":"\"","395":"a","1898":":","1014":"n","609":"o","2939":"4","1134":"\\","1126":"\\","326":"\\","2590":"l","3136":"s","2800":"\\","3199":"5","2419":"\"","257":"o","1062":"u","1819":"i","3201":",","129":"\"","1651":":","1206":"l","3067":"c","759":"c","600":"\"","1403":"a","365":"a","966":"k","2076":"\"","45":"\\","2512":"i","3190":"w","2951":"a","2809":"\\","2410":"\"","3005":"a","1071":"\"","1469":"\"","440":"\"","382":"c","2475":",","1982":"i","1658":"s","2011":",","406":"C","745":"\"","2921":"c","955":"g","2871":"5","336":"t","1331":"l","2502":"e","2958":"\\","2179":"a","1567":",","1298":",","3223":"o","2745":"\"","2309":"5","1801":":","2607":"n","1462":"i","1661":"/","860":"\\","2891":"z","1954":",","2067":"\\","zIndexMapData":"{\"1\":\"container-1\",\"2\":\"container-2\",\"3\":\"container-3\"}","405":"k","1304":"b","2672":"6","2664":"z","530":",","137":"s","2172":":","1291":"\"","2371":"\"","2223":"\\","2301":"\"","222":"\\","2360":"h","2009":"\\","1668":"u","3070":"t","1883":"m","1006":"b","1412":"a","1617":"\\","1020":"a","2722":"e","1311":"k","2272":"t","993":"5","524":"\\","1165":"s","885":",","2378":"R","1871":"v","893":"\"","1766":"n","2997":"\"","1686":"b","1679":"}","2795":"a","3079":"\"","2783":"e","1037":"i","2201":"a","252":"r","742":"\"","3102":"\"","1900":"\"","1107":"e","2868":"a","1602":"{","795":"l","8":"n","2979":"a","127":",","2837":"u","1516":"h","1289":"e","2369":",","3017":"1","2611":"e","2546":"\"","activeTabId":"\"containerTab\"","1670":"u","1226":"f","415":"\"","1928":"/","1796":"u","663":",","259":"o","1422":"r","2212":":","1943":"l","946":",","1234":"l","3186":"\"","1":"\"","2739":"a","63":"k","2529":"i","2970":",","1175":"e","2433":"\\","273":"\\","1286":"D","2425":"a","2757":"r","1514":"\"","wallpaper":"\"#1b2e18\"","233":"R","2132":"\"","2731":"i","2992":"l","426":"i","730":"5","3151":"a","3089":"L","2736":"\"","357":"e","837":"}","701":"\"","2140":"}","2676":"\\","1505":"\"","2083":"/","2095":"m","10":"r","1860":"h","941":"\"","3058":",","3096":"\\","3161":":","855":"n","3178":"\\","739":"9","2186":"\\","1110":":","2046":"}","2385":"\"","838":",","2687":"d","2968":"\"","2149":"I","154":"R","2153":"r","19":"s","2928":"t","1354":"\\","2985":"e","2691":"f","3051":"n","1029":"\"","1036":"W","1935":"d","3082":",","453":":","74":"\"","787":"l","1330":"o","2967":"\\","285":":","544":"\"","2824":"\\","329":"\"","1853":"r","2639":"\\","1707":"l","2559":"\\","2121":"}","3100":"\"","1258":"\\","479":"e","1437":"i","267":"r","595":"l","197":"\"","938":"t","583":"D","1623":"\"","820":"o","1896":"\\","2537":"\"","2257":"d","630":"g","3162":"\\","2855":"w","1981":"l","2768":"t","1344":"h","2632":"e","2624":"e","2128":"b","1690":"\"","1825":"\\","1253":"b","2333":"u","718":"\\","675":":","1446":"\\","657":":","1925":"p","1596":"o","933":"\\","3097":"\"","1628":"l","829":"a","1328":"r","2910":"o","639":"n","554":"h","2444":"d","490":"o","310":"\"","2763":"\\","1097":",","442":"n","2043":"m","2111":"S","1683":"\"","15":"a","844":"\\","711":"R","24":"{","2885":")","2494":"1","2897":"\\","375":"s","2699":"h","292":"\"","1522":"l","1154":"2","1538":"a","1141":"o","1840":"\\","2354":"e","1719":"/","1482":"d","2118":"n","691":"l","1557":"5","1776":"l","1042":"\"","2593":"a","2585":"\"","1586":"2","1836":"l","1098":"\\","2022":"h","2898":"\"","1734":"\\","2481":"t","2575":"\"","2248":"\"","174":"0","1681":"{","1531":"\\","677":"\"","25":"\\","1087":"\"","509":"\\","3033":"1","3025":"n","708":"d","1052":"b","275":"f","470":"o","1215":"t","809":"s","95":"x","466":"l","766":"l","1884":"\\","2901":"}","1963":"\"","567":"\"","975":"b","497":"\\","2521":"e","1729":"c","100":"\"","518":"i","2562":"\"","1195":"I","1547":"\"","3181":"7","707":"a","1383":"e","1458":"x","901":",","645":",","1641":"\\","800":"\\","270":"\\","164":"g","2238":",","3142":"g","1519":"o","1974":"2","3107":"v","2455":"\"","3114":"\"","236":"i","1365":"\"","2652":"\"","2635":"o","109":":","2645":"7","2108":"n","511":"h","114":"\\","1271":"\\","2310":",","1753":"}","1742":"a","1906":"d","202":",","1918":"\"","912":"3","2931":"v","574":",","942":":","2464":"o","2718":"e","2702":"d","1731":".","2284":"a","2292":"d","2282":"\"","1811":"/","3209":"t","1749":"\\","3198":"4","1083":"l","635":"\\","1911":",","394":"f","autoplayAudio":"false","1017":"l","608":"C","1135":"\"","1127":"\"","327":"\"","3137":"e","2299":":","2801":"\"","2418":"\\","2817":"Y","1063":"s","1818":"a","3202":"\\","3213":"5","1650":"\"","1207":"s","3060":"\"","3222":"t","2929":"e","3170":"\"","603":"v","1402":"f","2864":"\"","967":"g","2879":"5","1128":":","2077":"h","44":"1","2513":"c","3106":"i","2950":"p","1642":"\"","2413":"e","3196":"\"","2405":"r","3004":"M","1809":":","1068":"\"","249":"\"","1471":"e","213":"d","2774":"i","1237":"k","407":"o","3069":"n","1787":"m","1409":"\"","956":"s","347":"\\","2870":"2","337":"i","2518":"a","2160":"\"","1566":"5","1299":"\\","2746":"d","1800":"\"","2606":"e","1463":"g","2457":"e","1660":"/","863":"\\","875":"o","1994":"a","1953":"]","2066":",","54":"\\","774":"s","1303":"a","1319":"e","2667":"\"","533":"h","134":"i","2173":"\\","29":"\\","1718":":","2370":"\\","1879":"e","223":"\"","2006":"h","2705":"I","settingsMenuData":"{\"x\":\"1000px\",\"y\":\"51px\",\"width\":453,\"height\":554}","1694":"t","3258":"\n","1885":"\"","1614":"n","2069":"u","2394":"\"","1310":"c","1986":"\\","984":"b","1026":"0","992":"5","525":"\"","211":"W","1870":"i","890":"\"","2241":"h","1767":"k","2994":"e","709":"o","1678":"\"","2794":"h","2782":"c","670":"o","251":"o","3257":"}","247":",","2343":":","1603":"\\","344":"\\","2978":"W","124":"3","2866":"g","999":"0","2834":"w","2368":"\"","3016":"\"","2547":"l","3235":"\"","1960":"e","1229":"s","722":"b","414":"\\","2789":"\"","752":"\\","1795":"\"","662":"\"","258":"l","2197":":","1942":"g","1375":"d","2059":"\\","2526":"e","1174":"z","2432":"\"","1287":"a","2424":"N","2758":"\\","1777":"a","3098":"\\","2548":"i","2131":"\\","425":"S","2016":"l","731":"5","231":"e","3247":"s","1949":"/","1118":"f","3088":"o","2737":":","500":"c","830":"l","2141":",","2267":"\\","2084":"/","2096":"o","11":"M","1863":"p","editToggleRgba":"rgba(0,0,0,0)","492":"o","2442":"C","3059":"\\","947":"\\","854":"i","184":"k","2187":"\"","1111":"\\","3172":"\\","2041":"c","2386":":","839":"{","2686":"l","155":"g","480":",","2551":"C","2237":"\"","2374":"r","3044":"\"","1028":"\\","1936":"a","450":"e","758":"\"","445":"l","786":"a","2689":"\"","2966":"1","282":"e","547":"a","823":"I","1850":"\\","105":"h","2946":"w","2558":":","2120":"\"","1698":"c","1241":"o","834":"\"","921":"e","2586":"e","580":"b","1620":"[","821":"c","1895":"l","2278":"\"","2918":",","144":"b","631":"n","3163":"\"","2854":"o","2347":",","498":"\"","2771":"t","1859":"\"","1345":"e","2633":"r","2625":",","1691":":","1824":"m","1252":"f","2330":"g","1447":"\"","654":"X","1926":"s","1595":"i","932":",","2199":"\"","1327":"e","1338":"\"","2911":"n","557":"d","1149":"\"","2447":"\"","1848":"\"","313":"c","1569":"9","2762":"\"","1711":"\\","1096":"\"","683":"\"","2110":"U","699":"0","757":"\\","2283":"b","2339":"h","2903":"\\","cursors":"{}","1448":":","2886":"\\","2493":"\"","1639":"b","2489":"\\","2698":"\"","2240":"\"","293":"f","1523":"u","1155":"4","1539":"d","1140":"i","309":"\\","1841":"\"","2579":"1","3126":"e","1485":"X","501":"0","690":"B","2601":"u","799":",","2328":"c","1043":":","2594":"t","1185":",","462":"e","1585":":","2023":"t","1630":"\"","2899":":","2480":"c","2249":":","623":"t","298":"o","2843":"\"","1536":"s","1721":"w","1086":"\\","2570":"S","3125":"n","2230":"\"","3032":"-","2321":"\\","2340":"a","1450":"\"","274":"\"","3188":"\\","2861":"\"","2028":"/","1216":"i","808":"n","467":"e","769":"\"","80":"\\","2902":",","831":"I","566":"\\","976":"a","1382":"s","615":":","1728":"t","101":"h","1495":"\\","2100":"l","1263":"k","1546":"\\","2318":",","1378":":","706":"h","1459":"t","900":"\"","1640":"e","803":"e","814":"}","163":"r","2239":"\\","3141":"n","1973":"\"","2943":"\"","2710":"c","1739":"\\","2655":"\"","945":"1","2646":"7","2109":"-","512":"e","117":"i","2268":"\"","1268":"\\","1491":"0","2311":"2","1741":"l","1907":"a","203":"\\","3158":"x","1919":":","2228":":","2932":"a","575":"\\","3148":"D","1577":"z","2465":"l","1730":"h","331":"\\","2291":"n","1198":"l","1810":"/","2536":"\\","2194":"e","1908":"r","1912":"\\","393":":","1187":"\"","389":"l","2965":"3","1016":"A","2221":"\"","1136":"s","961":"\\","1120":"n","1716":"p","2476":"\\","2942":"]","3134":",","2298":"\"","2806":"\\","2814":"d","1060":"d","1479":"s","1076":"o","1039":"t","3212":":","3061":"3","2680":"a","380":"s","719":"\"","602":"i","1401":":","2865":"r","1962":"\\","2878":"2","1129":"\\","2510":"a","2949":"l","2168":"i","2505":"i","931":"9","2412":"r","3007":"D","1808":"s","1069":"0","1470":"l","2275":"g","2540":"a","404":"n","2923":"o","1408":"\\","957":"\\","2472":"\"","2816":"w","334":"e","2519":"l","2161":":","145":"a","1561":"5","1296":"s","2747":"i","1803":"\"","2605":"\"","1667":"o","1239":"o","862":",","874":"b","1001":"\\","1419":"i","1952":"}","958":"\"","35":"o","2061":"m","2725":"b","1302":"n","3108":"e","1318":"s","2279":":","532":"\"","135":"n","360":"i","2377":"r","1878":"l","2748":"v","898":"x","224":",","2007":"u","3072":"i","1410":"e","1959":"b","1615":"k","2068":"\"","2395":"b","1309":"o","1317":"l","1987":"\"","2270":"e","991":"2","1511":"\"","526":"8","2927":"n","1873":".","891":":","2995":"\"","2338":"p","342":"z","1677":"\\","1221":"l","2781":"\"","2203":"e","250":"b","1786":"g","3256":"\"","246":"\"","1101":"o","2051":"l","1600":"\"","3204":"h","345":"\"","797":"e","2977":"t","125":"6","1992":"\"","998":",","2835":"B","2367":"\\","2750":"d","408":"l","465":"b","2613":"l","1717":"s","969":"o","2139":"}","3236":"f","3006":"p","1228":"l","398":"e","723":"a","2788":"\\","1794":"\\","1038":"d","665":"\"","1420":"d","2214":"\"","1941":"o","948":"\"","2217":"7","517":"S","2058":":","2671":"1","2527":"c","266":"g","1173":"i","2435":",","1284":"l","2427":"e","2759":"\"","1770":"\"","2549":"n","1337":"\\","2130":"l","1397":"i","424":"k","728":",","3246":"r","1843":"r","1948":"m","1119":"o","2049":"\\","3087":"i","2734":"r","1492":"\\","843":"d","2142":"\\","2260":"\\","2154":"v","1503":"Y","2085":"d","2097":"z","1862":"t","882":"s","2982":"p","857":"r","185":"g","2184":"-","1112":"\"","2040":".","355":"\"","2387":"\\","2681":"d","3174":"y","2823":"0","2098":"i","481":"\\","1700":"\\","1321":"\\","434":"1","1249":"c","363":"I","3053":"r","3045":"c","2071":"l","1430":"e","929":"3","97":"\"","592":":","1937":"r","588":"e","451":"\\","76":"4","444":"b","1336":":","2688":"\\","283":"\\","546":"f","2779":":","1851":"\"","2656":"h","1725":"t","3254":"{","1699":"h","1240":"l","2449":"\\","1139":"t","265":"\"","581":"l","1621":"{","822":"k","776":",","1894":"e","531":"\\","2919":"\\","143":"\"","632":"\\","3146":"n","288":"\\","2853":"d","2346":"0","2770":"x","2543":"e","1528":"\\","1342":"\\","2634":"C","3159":"\\","2626":"\\","1692":"\\","1827":"}","2331":"r","1838":"\"","1440":"r","1927":":","2334":"n","1594":"t","3128":"T","3095":"\"","779":"c","2690":":","2912":"s","556":"a"} \ No newline at end of file
diff --git a/themes/modern_night.txt b/themes/modern_night.txt
new file mode 100644
index 0000000..7bdb2c4
--- /dev/null
+++ b/themes/modern_night.txt
@@ -0,0 +1 @@
+{"1148":"\\","2446":"\\","1849":",","312":"e","2353":"d","1710":":","1095":"\\","682":"\\","2117":"e","6":"a","698":"\"","324":"\"","1831":"\"","1100":"f","1449":"\\","2532":"B","2887":"\"","2492":"\\","1638":"u","373":"a","367":"i","173":",","290":",","1520":"w","1156":"1","1147":"r","241":":","2578":"\"","307":"\"","689":"w","1484":"w","502":"b","697":"\\","1559":",","1846":"e","2329":"k","1040":"h","1984":"k","1055":"d","2587":"n","1584":"\"","2020":"\\","2499":"\\","2487":"z","761":"o","88":":","622":"\"","299":"d","audioLink":"\"\"","1529":"\"","1537":"h","2159":"\\","1720":"/","1085":"r","2573":"e","2565":"\"","3124":"i","1192":"i","2308":"5","3035":"\"","3027":"a","2208":"\"","1451":"\\","3207":"g","642":"r","2588":"a","476":"t","1217":"o","1332":"o","2034":"g","768":"\\","81":"\"","3153":":","2231":"2","977":"\\","2849":"\"","2452":"\"","2320":")","1494":",","2101":"a","102":"e","1260":"l","1541":"w","1276":"\"","2319":"0","1754":",","705":"s","3066":"\"","903":"\"","496":":","915":"\\","2840":"\"","1647":"r","802":"s","815":",","162":"\"","3140":"i","1972":"\\","2713":":","33":"\"","1363":",","2654":"\\","2647":"7","513":"a","116":"w","1269":"\"","1684":"l","2316":"5","1740":"\"","1396":"l","204":"\"","2229":"\\","2933":"l","572":"s","3156":"\\","2462":"n","2566":"l","1733":"v","1901":"c","2648":"6","2290":"u","1571":")","2524":"\"","1813":"w","471":"c","350":"6","1909":"\\","1913":"\"","1657":"p","1200":"c","392":"\"","388":"o","1816":"g","1011":"r","960":"{","1121":"t","2070":"r","43":"-","325":":","2941":"}","2957":"\"","3135":"\"","2807":"\"","2815":"o","2306":"(","1061":"i","3113":"d","1478":"\"","1077":"r","927":"\"","214":"t","3211":"\"","1768":"s","399":",","387":"B","605":"d","1400":"\"","617":"\"","1961":"l","2877":",","2511":"l","2948":"l","2169":"d","2504":"t","2166":"\\","2415":"\\","2407":"\"","190":"d","1473":"t","1464":"n","1231":",","3143":"s","2014":"u","1009":"k","1785":"\"","304":"\\","950":"e","2473":"\\","335":"c","2162":"3","2174":"\"","1560":"2","1297":"e","2740":"l","1802":"\\","2604":"\\","2297":"\\","1666":"y","1238":"C","865":"n","1000":")","1418":"v","1951":"\"","959":":","2478":"s","2060":"\"","2724":"a","52":"m","1301":"e","983":"g","89":"\\","1163":"\\","2531":"n","883":"\\","2749":"i","899":"\\","1760":":","225":"\\","2793":"s","2004":"i","3073":"n","1958":"a","1612":"l","1608":":","2396":"o","59":"c","1308":"l","200":"0","1316":"a","990":",","527":"0","1346":"a","3011":"\"","1872":"e","3182":"0","1769":"\\","1676":"m","1220":"o","413":":","2164":",","2780":"\\","2202":"t","1428":"l","245":"\\","2761":"\\","1102":"n","2050":"\"","65":"\"","796":"s","2679":"e","5":"t","2976":"a","122":"\"","2726":"l","3105":"t","1993":"l","2832":"d","2366":"0","2751":"e","1778":"b","2892":"I","2614":"o","235":"d","2138":"\"","3237":"a","720":"r","736":",","664":"\\","1427":"a","676":"\\","1940":"o","2670":"\"","954":"n","1172":"S","491":"l","1285":"e","16":"l","3221":"u","1771":":","2137":"\\","3238":"l","3024":"o","423":"n","729":"2","3245":"u","679":"\\","2048":"{","3086":"d","352":"\"","832":"d","1687":"e","2143":"\"","152":"n","2155":"a","1500":"d","2086":"e","845":"\"","2090":"o","2429":"\"","1708":"\\","1352":"z","2983":"a","2869":"(","884":"\"","856":"e","1023":":","1438":"d","186":"r","2185":"2","198":":","1113":"\\","459":",","781":"o","2258":"t","3104":"c","2822":"\"","2099":"l","482":"\"","1701":"\"","2553":"l","2988":":","2127":"a","1248":"#","3054":"-","1556":"2","3046":"o","1431":",","3191":"i","928":":","593":"f","191":"A","1938":".","589":"r","456":"l","1517":"a","77":"7","447":"D","1335":"\"","2251":"6","280":"a","3168":"x","549":"s","2778":"\"","1856":"\"","3150":"t","2406":"\\","1629":"\\","1243":"\\","432":"\\","1255":"\\","264":"\\","75":"2","935":"w","1626":"b","940":"\\","771":"f","1893":"b","142":"\\","633":"\"","289":"\"","3064":":","2852":"a","2345":"0","2773":"l","1601":":","2765":",","1343":"\"","2627":"\"","2663":"i","1182":"6","439":"\\","717":":","1839":":","1441":"C","652":"o","3094":":","778":"\"","1325":"a","2693":"l","2913":"\\","149":"r","551":",","2859":"a","2441":"t","493":"r","2352":"r","1713":"h","1348":"e","1094":"y","681":",","2116":"=","1551":"r","1829":"{","1048":"\"","1832":"l","3250":"s","2888":",","2491":":","1637":"t","372":"f","2534":"l","2242":"e","172":"0","291":"\\","1521":"B","1157":"f","1146":"o","23":"[","1373":"o","306":"\\","3194":"h","688":"o","1487":"\"","503":"f","696":":","1558":"5","2326":"b","1041":"\\","305":"\"","2596":"\\","1054":"r","2580":"6","158":"\\","1583":"\\","2021":"\"","2498":",","2486":"i","760":"l","1882":"o","179":"\\","561":"t","2841":":","2029":"/","1534":"\\","1084":"o","2572":"z","2564":"\\","926":"\\","2550":"k","1193":"o","1549":"\\","3034":"\\","3026":"t","1385":"\\","1452":"\"","643":"\\","2589":"b","477":"r","1210":"\\","2037":"h","82":",","3152":"\"","3071":"a","2232":"2","970":"u","2848":"\\","2453":",","401":"\"","1497":"s","2102":".","1261":"i","1540":"o","1277":",","1755":"\\","3029":"n","902":"\\","2545":"\\","914":"x","1646":"u","805":"t","1887":",","816":"\\","161":"\\","3224":"p","1971":",","2712":"\"","2704":"r","32":"\\","1360":"6","2657":"e","1634":"y","1837":"\\","2640":"\"","1579":"n","2317":"5","2305":"a","3192":"d","205":"b","2207":"\\","1208":"e","1019":"h","2934":"I","968":"r","2078":"t","1732":"t","2289":"o","2649":"7","1570":"0","1387":"h","1812":"w","218":":","3219":"\"","1914":"u","1656":"t","1201":"\\","391":"\\","1010":"g","578":"n","1138":"c","1122":"C","2468":"\\","42":"r","2940":"7","2956":":","2804":"\"","2812":"h","2307":"2","1066":":","1074":"\"","215":"h","3210":"\\","2735":"\\","3115":":","740":")","386":"n","755":"1","374":"l","604":"i","1407":",","616":"\\","384":"i","2876":"5","2403":"l","2516":":","2507":"n","2414":"y","3001":"d","1472":"f","1465":"\\","3160":"\"","1230":"e","2015":"r","402":"l","1008":"c","1784":"\\","951":"t","2470":":","3117":"\\","332":"\"","1082":"o","2669":"\\","2163":"}","535":"a","132":"t","2175":"c","1563":",","1294":"a","2741":"s","2924":"c","1665":".","864":"\"","876":"o","1003":",","1417":"i","1950":"\\","2479":"e","2063":"n","2727":"e","51":"a","1300":"\"","2685":"o","982":"r","1162":",","1421":"e","3019":"\"","880":"r","2375":"d","87":"\"","896":"9","1761":"{","226":"\"","2792":"\"","2005":"t","3074":"e","879":"a","1613":"i","1609":"{","2397":"r","58":"\"","1315":"f","989":"5","2485":"S","1513":"\\","1169":"i","3010":"a","1875":"o","2993":"s","1675":"o","1223":"\\","2799":"X","412":"\"","1033":"d","256":"C","244":"0","1103":"t","2053":"b","1606":"\\","66":",","791":"\"","2678":"h","4":"n","2975":"e","123":":","1990":"{","2833":"o","2365":"\"","2752":"r","1108":"\\","1779":"e","2615":"c","2542":"s","2998":"z","3230":"d","777":"\\","721":"g","737":"0","667":"h","1426":"f","2216":"6","671":"w","2269":"s","3180":"1","1508":"\"","1171":"n","2437":"\"","17":"u","1865":":","2603":",","1772":"[","2136":"2","3239":"s","3227":"y","464":"a","2017":"\\","3244":"c","678":"0","1631":":","2380":"d","353":",","789":"c","833":"\\","2144":"c","2262":":","153":"d","2156":"l","2300":"\\","1501":"o","2087":"v","985":"a","2091":"p","2428":"\\","1709":"\"","1353":"e","2980":"l","429":"\\","851":"n","1022":"\"","1439":"e","187":"o","3112":"I","2182":"e","199":"1","1114":"\"","2042":"o","358":"c","780":"l","3255":"}","2683":"r","2259":"h","541":"l","2821":"\\","483":"h","1852":"u","1702":",","2552":"o","2989":"\"","2126":"l","3055":"3","3047":"n","1432":"\\","188":"u","590":"\\","192":"l","1939":"g","586":"i","457":"s","78":"p","446":"e","1334":"\\","2252":",","281":"m","3169":"\\","548":"l","1857":":","3118":"\"","1242":"r","431":":","1254":"c","263":":","922":"i","1593":"c","934":"\"","1627":"e","368":"c","1892":"a","141":"{","559":"r","2851":"h","2344":"1","2772":"A","315":"i","2764":"\"","1340":"\"","2636":"l","2620":"f","1183":"\\","438":",","1821":".","2337":"l","714":"a","1442":"o","653":"w","1921":"\"","2880":"5","1324":"e","2692":"a","2914":"\"","148":"g","550":"e","2858":"b","2440":"n","1847":"\\","2351":"o","1712":"\"","1349":"r","680":"\"","2115":"l","1550":"\"","1828":",","1049":",","34":"c","1833":"a","2250":"4","2889":"\\","2490":"\"","1636":"u","371":":","2243":"i","171":",","296":"t","569":"f","1145":"l","22":"\"","1370":"e","1486":"\\","504":"b","695":"\"","2327":"a","2277":"\\","1046":"0","2597":"\"","1057":"r","272":",","2581":"\\","3175":"\\","1582":"x","234":"a","1218":"n","90":"\"","763":"k","1881":"c","2904":"\"","624":"e","178":",","560":"I","978":"\"","3173":"\"","1535":"\"","147":"k","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"clock\",\"x\":\"248px\",\"y\":\"147px\",\"height\":180,\"width\":321,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"#deddda\",\"headerSize\":\"80\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":1,\"clockBold\":true},\"sections\":{},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"date\",\"x\":\"248px\",\"y\":\"214px\",\"height\":162,\"width\":182,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":true,\"enableClock\":false,\"headerColor\":\"#9a9996\",\"headerSize\":\"18\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"clockBold\":false,\"dateItalic\":false},\"sections\":{},\"clockIntervalId\":3},{\"id\":\"container-3\",\"name\":\"bookmarks\",\"x\":\"245px\",\"y\":\"235px\",\"height\":443,\"width\":82,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#ffffff\",\"sectionSize\":\"0\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#deddda\",\"linkSize\":\"16\",\"linkDecor\":false,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://www.youtube.com\"},{\"label\":\"twitch\",\"url\":\"https://www.twitch.tv\"}],\"label\":\"1\"},\"1\":{\"links\":[{\"label\":\"gmail\",\"url\":\"https://www.gmail.com\"},{\"label\":\"drive\",\"url\":\"https://drive.google.com\"},{\"label\":\"calendar\",\"url\":\"https://calendar.google.com\"}],\"label\":\"2\"},\"2\":{\"links\":[{\"label\":\"github\",\"url\":\"https://www.github.com\"},{\"label\":\"mdn\",\"url\":\"https://developer.mozilla.org/en-US/?hl=en\"}],\"label\":\"3\"}},\"clockIntervalId\":4}]","1722":"w","1379":"f","107":"\\","2567":"i","1190":"c","1548":":","3037":"\\","3021":"\\","1384":",","1453":",","2196":"\"","640":"t","824":"n","1568":".","474":"\"","1211":"\"","2036":"t","83":"\\","2711":"\\","169":",","2233":"9","3147":"u","971":"n","2450":"\"","1368":"a","362":"n","1496":"\"","2103":"o","514":"d","111":"5","1266":"z","1543":"g","1274":"6","1756":"\"","1747":"\"","1391":"e","905":"\\","917":",","1645":"\"","804":"c","3121":"n","208":"d","817":"\"","1502":"w","160":":","1970":"}","3185":"\\","2715":"a","2707":"a","31":":","1361":"\\","2281":"\\","2641":":","1578":"I","2314":",","3193":"t","1902":"a","206":"o","1209":",","1018":"p","2935":"d","570":"a","1130":"\"","2460":"i","2079":"t","322":"r","2288":"r","3132":"\"","2862":":","1164":"\"","1573":"\"","1815":".","3218":",","1915":"r","753":"\"","1655":"t","1202":"\"","390":"d","748":"n","2215":"2","1013":"u","1968":"\\","579":"a","1123":"o","2469":"\"","41":"e","2947":"a","2955":"\"","2805":"0","2813":"a","2304":"b","3009":"t","1067":"\\","1075":"b","3206":"i","216":"\\","3217":"\"","741":"\\","385":"o","1031":"o","607":"r","1406":"e","611":"o","1967":"1","2875":"5","2517":"f","2506":"o","2417":",","2818":"\\","3000":"n","1805":"t","770":":","1475":"\"","1576":"\"","1466":"\"","2376":"e","1233":"\"","403":"i","3229":"u","1783":":","2056":"\\","952":"t","2471":"\\","3176":"\"","908":"\\","333":"s","2668":":","534":"e","2509":"t","2176":"o","1562":"5","2426":"m","1295":"l","888":"x","2742":"e","962":"\"","1793":",","1664":"w","2922":"l","867":"m","871":":","1002":"\"","488":"r","1416":"D","920":"h","2062":"d","50":"n","754":":","2276":"s","981":"\"","138":"\\","997":"5","520":"e","3018":"\\","1723":"w","881":"k","716":"\"","897":"p","1762":"\\","949":"s","227":"b","2791":"\\","2002":"\"","3075":"r","2787":"r","2205":"\"","878":"m","1610":"\\","2390":"\\","343":"e","2274":"n","1314":":","988":"5","2541":"l","852":"t","1512":",","1168":"t","1649":"\\","3013":"\"","1874":"g","2990":"f","2708":"l","1674":"c","1222":"d","2798":"w","411":"\\","1032":"r","1930":"c","255":"r","2192":"a","243":"\"","3083":"\"","1619":":","2052":"a","1607":"\"","67":"\\","790":"\\","3":"o","2974":"p","120":"h","1179":"\\","1991":"\\","2830":"h","1282":"a","2364":"\\","2753":"C","2616":"k","237":"u","2999":"I","3231":"i","3109":"T","726":"5","734":"5","1799":"\\","666":"s","1425":":","1946":"c","2388":"\"","2732":"d","68":"\"","2522":",","1509":"0","1170":"o","2436":"\\","14":"V","2420":"f","1864":"s","2488":"e","1773":"{","3122":"t","2135":"\"","421":"l","859":"3","3243":"\"","1792":"\"","2381":"i","3028":"i","788":"i","2145":"l","2263":"1","150":"o","2157":"I","128":"\\","2088":"e","3249":"r","2092":"e","1350":"S","2981":"l","3205":"e","428":"e","850":"o","1025":"0","2032":"w","180":"\"","1007":"a","2183":"r","598":",","1931":"a","1115":",","2177":"n","70":"\\","359":"t","783":"k","2682":"e","2963":"1","2158":"d","540":"o","2820":":","484":"e","2227":"\"","1703":"\\","2555":"r","2125":"\"","3056":"\\","655":"\\","3040":"\\","2842":"\\","1433":"\"","189":"n","591":"\"","193":"p","587":"d","454":"f","79":"x","441":"e","2533":"o","2253":"\\","3166":"0","1854":"l","2628":"h","1245":":","430":"\"","1257":",","3234":":","1929":"/","262":"\"","1592":"e","937":"d","1624":"l","369":"\\","1891":"l","140":":","558":"e","2850":"s","2448":":","494":"\\","2775":"g","2359":"t","2767":"\"","1341":",","1093":"e","2621":"a","1695":"w","3068":"o","1820":"l","840":"\\","715":"\\","2119":"\\","1443":"l","650":"a","1922":"h","2881":",","1599":"\\","379":"\"","2867":"b","1323":"h","2695":"e","2915":":","1526":"\"","553":"\"","3149":"a","2443":"o","1844":"i","1510":"\\","2350":"b","301":"\\","2114":"h","1553":"b","2595":"e","2660":"e","1834":"b","751":"x","2026":"s","1635":"o","98":",","370":"\"","1889":"\\","170":"0","297":"C","568":":","1144":"o","21":":","1371":"r","1489":"\\","505":"c","694":"\\","2324":"\\","1047":"\\","2598":":","1056":"e","648":"s","271":"\"","2582":"\"","1581":"e","2271":"t","1518":"d","1219":"B","91":"1","762":"c","1880":".","2905":"s","627":"A","563":"l","979":":","2458":"c","925":"t","28":"d","2574":"\\","104":"g","119":"t","1191":"t","3036":",","3080":"}","3020":":","703":"\\","1454":"\\","641":"e","475":":","1212":"s","2198":"\\","463":"n","168":"0","2234":"p","316":"o","1978":"{","972":"d","2451":"\\","39":"i","212":"i","1369":"d","1089":"\\","2104":"r","515":"e","110":"1","1267":"e","1542":"R","364":"t","1275":"\\","1757":"1","1746":"\\","1390":"d","904":"y","916":"\"","2666":"\\","1411":"n","1644":"\\","807":"o","468":"C","810":"\\","2714":"f","1985":"s","30":"\"","2659":"d","2280":"{","2642":"\\","2315":"2","1758":"\\","1903":"l","207":"r","919":"\"","2224":"\"","2936":"\\","571":"l","1131":"\\","2461":"o","49":"\"","2709":"i","323":"\\","3133":"\"","2890":"\"","1572":"\\","1814":"w","2673":"\\","1916":"l","1654":"h","1203":":","749":"d","1012":"o","2222":",","619":"\"","963":"b","2073":"\"","40":"n","328":"\\","2954":"r","2847":",","2810":"\"","3008":"a","1064":"\\","1021":"\\","1072":",","217":"\"","64":"\\","3216":"}","3127":"r","1738":",","2012":"\\","746":"z","2571":"i","2926":"I","606":"e","1405":"s","55":"\"","1966":"\"","1685":"a","2874":"2","1947":"o","2514":"\\","847":"\\","2501":"s","3103":"a","2416":"\"","2819":"\"","2400":"r","3003":"x","1804":"h","1474":"\\","2602":"e","1467":":","2434":"\"","1232":"\\","400":"\\","1782":"\"","1957":"l","953":"i","2525":"s","1307":"C","330":",","1372":"B","537":"e","2508":"I","130":"s","528":"\\","1292":":","889":"\\","489":"C","2":"c","2609":"b","1398":"c","866":"a","870":"\"","1005":"\"","1789":"i","1415":"e","3062":"\\","2398":"d","2721":"\"","2662":"S","980":"\\","139":"\"","996":"5","521":"\\","1160":"\\","381":"e","2404":"o","886":"\\","894":"1","1763":"\"","228":"o","2790":",","2003":"g","419":"\\","3076":"-","2786":"e","2204":"\\","3253":"\"","1611":"\"","3063":"\"","2391":"\"","340":"S","798":"}","3110":"a","1983":"n","1999":"\"","1515":"s","3012":":","2661":"r","1877":"g","2991":"a","636":"\"","1673":".","1225":":","410":"r","2811":"s","1791":"\\","254":"e","2211":"\"","2193":"m","242":"\\","2055":"l","1604":"\"","60":"l","793":"f","2973":"e","121":"\\","1988":":","1178":":","1996":"e","2831":"a","1283":"b","2363":":","2754":"o","7":"i","2617":"\\","519":"z","3232":"o","727":"5","735":"5","1798":"l","669":"d","1424":"\"","673":"\\","1945":".","2838":"r","2389":"0","2733":"e","69":"x","2675":",","2523":"\\","573":"e","1399":"\\","1506":":","2080":"p","2439":"o","2423":"t","1867":"/","1358":"\"","2134":"\\","1262":"n","1979":"\\","420":"\"","858":"-","3242":",","2045":"\"","2382":"u","351":"\\","2146":"o","516":"r","151":"u","2150":"n","2828":"\"","2089":"l","2093":"r","1351":"i","2986":"r","704":"\"","564":"i","3048":"t","1024":"1","181":"b","2180":"i","599":"\\","1932":"l","1116":"\\","2893":"n","71":"\"","449":"t","782":"c","1333":"r","2962":"4","286":"\\","543":"\\","2827":"\\","485":"a","1704":"\"","2554":"o","2124":"\\","61":"o","1394":"t","3057":"\"","3041":"\"","1434":"d","596":"s","194":"h","584":"i","455":"a","361":"o","1899":"\\","1775":"\"","2530":"o","3171":",","2254":"\"","3167":"p","1099":"\"","1855":"\\","1735":"\"","2629":"e","1188":"s","1244":"\"","437":"\"","1256":"\"","848":"\"","1680":",","674":"\"","658":"\\","261":"\\","1591":"s","936":"i","3092":"k","1625":"a","826":"e","772":"a","1158":"3","2342":"\"","495":"\"","317":"n","2358":"d","2766":"\\","1715":"t","1092":"r","687":"d","2622":"l","1181":"1","1823":"o","841":"\"","2335":"d","2520":"s","651":"d","1923":"t","2882":".","1598":"s","2497":"\"","2894":"d","378":"\\","1236":"n","1322":"\"","2694":"s","2244":"g","2916":"{","1527":":","552":"\\","1151":"\\","2349":"\"","1845":"v","2357":"i","300":"e","1481":"a","1552":"g","1835":"e","279":"N","1589":"\\","2027":":","99":"\\","1888":"{","3157":"\"","2401":"C","2296":"a","177":"\"","294":"o","1532":"\"","3241":"\"","2165":"{","20":"\"","1376":"\\","3129":"a","1488":":","506":"\\","1199":"i","943":"2","2325":"\"","1044":"\\","2599":"t","1051":"\"","649":"h","2583":",","1580":"d","92":"1","2031":"w","765":"o","84":"\"","2906":"e","626":"t","562":"a","2846":"\"","2459":"t","2336":"A","634":":","1724":".","1081":"C","2577":"\\","1499":"a","2561":"\\","118":"d","1196":"t","3039":"2","3023":"c","702":",","1386":"\"","1455":"\"","646":"\\","1030":"b","460":"\\","818":"c","167":"(","2235":"x","3145":"e","1977":":","973":"R","2456":"s","38":"a","1366":"h","2651":"\\","1088":":","1490":"\"","2105":"g","113":",","1264":"S","2535":"d","1272":"\"","1750":"\"","1389":"a","1745":"l","1393":"I","907":":","911":"6","2266":",","806":"i","469":"l","811":"\"","2717":"s","2701":"a","2658":"a","2287":"g","2643":"\"","2295":"b","877":"k","1759":"\"","3195":"\\","918":"\\","397":"s","2225":"y","2937":"\"","1132":"\"","1124":"d","48":"\\","320":"l","3130":"b","2802":":","3101":",","1575":"\\","1817":"m","2072":"\\","1917":"\\","1653":"\"","1204":"f","3065":"\\","3187":",","618":"\\","964":"a","620":",","2074":":","47":",","2945":"\"","repeatWallpaper":"false","2953":"e","1693":"\"","1886":"}","2408":":","1065":"\"","3225":"l","1073":"\\","210":"r","3215":"9","2013":"\"","747":"I","756":",","1404":"l","613":"\\","1965":"\\","2873":",","338":"o","2515":"\"","2500":"\"","1565":"5","3002":"e","1807":"p","1477":"\\","1078":"d","1460":"A","2706":"t","3226":"a","1663":"w","1161":"\"","2018":"\"","2247":"\\","2302":"r","1781":"\\","1956":"\"","2477":"\"","2065":"\"","2729":"i","57":"\\","1306":"e","219":"\\","536":"d","131":"e","529":"\"","1293":"f","2373":"o","2608":"a","220":"\"","3183":"p","869":"\\","873":"\"","1004":"\\","1788":"a","2399":"e","2720":"\\","348":"\"","1313":"\"","987":"2","539":"B","230":"d","995":"2","522":"\"","1167":"c","2637":"o","887":"\"","895":"5","1764":"l","229":"r","3154":"\"","2797":"o","2000":":","3077":"2","2785":"t","1035":"r","2219":"x","3252":":","1105":"a","2392":",","341":"i","944":"9","3111":"b","1980":"\"","1748":":","2839":"\\","3015":"\\","1876":"o","3220":"a","238":"s","1672":"e","2195":"\\","1224":"\"","417":"\"","433":"\"","1790":"l","661":"\\","2210":"\\","2190":"\"","2236":"\\","2054":"e","2925":"k","1605":"0","792":":","1890":"\"","2972":"r","1989":"[","1997":"l","1280":"e","2362":"\"","2755":"l","1774":"\\","2618":"\"","3233":"\"","1826":"\"","724":"(","732":",","668":"a","672":"Y","1944":"e","248":"\\","2730":"v","835":":","2674":"\"","2264":"5","1507":"\\","2081":"s","2438":"f","1015":"d","12":"a","1866":"/","1359":"1","2463":"C","2544":",","499":"#","2484":"n","2188":",","2044":"\\","2383":"s","1137":"e","2147":"c","156":"b","2151":"t","1869":"r","1356":":","2987":"\"","3049":"a","1027":",","182":"a","2181":"n","1933":"e","1117":"\"","1109":"\"","72":":","448":"a","785":"t","2538":":","2961":"2","287":"\"","542":"d","2826":",","486":"d","1705":"u","2557":"\"","2123":",","625":"x","3042":":","1414":"l","1435":"i","269":"y","597":"e","195":"a","585":"v","1696":"i","366":"l","443":"a","1339":"\\","2255":"w","3164":"6","2857":"g","2630":"a","1189":"e","1247":"\"","436":"\\","1251":"b","849":"c","1444":"o","659":"\"","260":"r","1590":"\"","2200":"d","3091":"n","827":"r","1159":"1","2341":"\\","2777":"\\","2860":"\\","308":",","1091":"g","686":"a","2113":"?","2623":"s","1697":"t","1822":"c","846":":","713":"b","133":"t","2883":"9","2496":"\\","2895":"e","377":",","1920":"\\","2697":"\\","2245":"h","2917":"}","1524":"r","3093":"\"","1152":"\"","1143":"C","2348":"\\","1842":"d","319":"o","2356":"W","303":":","1480":"h","693":"r","1555":"(","2591":"e","1059":"a","278":"t","3184":"x","1588":",","2024":"t","3119":"c","1633":"\"","2039":"b","2483":"o","176":"\\","295":"n","53":"e","1618":"\"","1533":",","27":"i","1377":"\"","2569":"k","507":"\"","3031":"r","2322":"\"","1045":"\"","1050":"\\","277":"n","2612":"C","472":"k","93":"2","2030":"w","764":"B","85":"y","684":"s","2907":"c","629":"i","3116":"\"","565":"c","2845":"\\","1727":"i","1080":"r","2576":":","1498":"h","2560":"\"","3123":"a","1197":"a","1545":"a","3038":"\"","3022":"\"","1381":"l","1456":"t","647":"\"","3084":"a","1643":",","461":"\"","819":"l","166":"a","2908":"t","3144":"M","1976":"\"","418":",","37":"t","1367":"e","2650":"b","1493":"\"","2106":"/","825":"t","112":"9","1265":"i","1273":"1","2312":"5","1751":"\\","1388":"e","1744":"e","1392":"r","1904":"e","906":"\"","910":"2","812":":","576":"\"","2466":"o","2716":"l","1737":"]","2286":"k","3138":"t","2294":"g","614":"\"","1278":"\\","2696":",","396":"l","3085":"u","2226":"\\","2938":":","1133":",","1125":"e","321":"o","3131":"\\","2803":"\\","1574":",","1104":"N","3200":"3","1652":"\\","1205":"a","773":"l","383":"t","601":"d","965":"c","2075":"\\","46":"\"","2944":",","2952":"p","2808":",","2411":"g","3120":"o","209":"e","2303":"g","1070":"\\","1468":"\\","3214":"2","458":"e","1235":"i","1659":":","2010":"\"","409":"o","744":"\\","2920":"\"","612":"r","1964":":","2872":"5","422":"i","339":"n","2503":"c","2959":"\"","2178":"t","1564":"2","1998":"\\","2744":"\\","2402":"o","1806":"t","1476":",","2600":"r","1461":"l","1662":"w","861":"\"","2019":":","1780":"l","1714":"t","1955":"\\","2474":"\"","2064":"\\","2728":"D","56":":","1305":"l","1079":"e","2665":"e","2167":"\"","106":"t","136":"g","909":"\"","2171":"\"","1290":"\\","2372":"b","2700":"e","221":"0","2008":"b","1669":"t","2863":"\\","868":"e","3189":"\"","872":"\\","1413":"b","1616":"s","2723":"n","349":"1","1312":"\\","986":"(","538":"r","994":",","523":":","1166":"e","1688":"l","2379":"a","159":"\"","892":"\\","1765":"i","2996":",","842":"i","2796":"d","2001":"\\","3078":"\\","2784":"n","1034":"e","2206":",","253":"d","2218":"p","3251":"\"","1106":"m","2431":"\\","2393":"\\","346":":","9":"e","126":"3","2836":"l","1288":"t","3014":"{","1995":"b","354":"\\","2610":"l","239":"\\","3177":":","1671":"b","1227":"a","416":"\\","1797":"r","660":"0","1423":"\\","2213":"\\","2191":"n","240":"\"","2421":"o","2057":"\"","2738":"f","62":"c","2528":"t","0":"{","2971":"\"","1176":"\\","2430":":","96":"\\","1281":"n","2361":"\\","2756":"o","923":"g","2619":":","232":"r","2133":":","427":"z","725":"2","2409":"\\","733":"2","2964":"f","356":"s","836":"2","2677":"\"","2265":"3","1504":"\\","2082":":","3203":"\"","2094":".","13":"p","1861":"t","2273":"i","738":".","2189":"\\","3240":"e","1648":"l","1150":":","2047":",","2384":"\\","3081":"\"","750":"e","2684":"B","2969":"\"","2148":"k","157":"a","2152":"e","18":"e","1868":"d","1357":"\\","2984":"p","3050":"i","1177":"\"","183":"c","1934":"n","452":"\"","314":"t","73":"\\","784":"I","2539":"f","2960":"#","284":"\"","545":":","2825":"\"","487":"e","2638":"r","1706":"r","1362":"\"","2556":"\\","2122":"]","1259":"\"","3043":"\\","1436":"v","268":"e","594":"a","196":"\\","939":"h","582":"e","3099":"\"","1622":"\\","775":"e","1897":"\"","146":"c","2256":"i","637":"c","3165":"8","794":"a","2856":"R","2769":"e","1347":"d","2631":"d","3052":"e","2129":"e","1186":"\\","1246":"\\","435":"6","1689":"\\","1250":"0","2332":"o","1445":"r","656":"\"","1924":"t","3248":"o","1597":"n","930":"4","3090":"i","828":"v","1329":"C","2209":"x","638":"e","555":"e","1326":"d","2445":"e","2776":"n","311":"s","2035":"i","2760":":","1090":"\"","685":"h","2112":"/","2170":"\\","2261":"\"","1682":"\\","710":"w","2884":"0","2495":"6","2896":"x","610":"l","2220":"\\","376":"e","1320":",","2246":"t","1525":"\\","1153":"#","1142":"n","318":"C","1184":"\"","2355":"r","302":"\"","3179":"\"","1483":"o","692":"u","1554":"a","1830":"\\","2592":"D","1058":"R","2584":"\\","1587":"}","2025":"p","1632":"\\","2038":"u","2482":"i","1355":"\"","621":"\\","175":")","2829":"s","1530":"0","1213":"e","26":"\"","1374":"l","2568":"n","508":",","3030":"e","2743":",","2323":",","1053":"o","276":"o","3228":"A","1969":"\"","473":"\\","1214":"c","94":"p","2033":".","767":"d","86":"\\","2900":"3","628":"l","1858":"\\","974":"g","2844":"0","1726":"w","103":"i","743":",","2563":",","1194":"n","1544":"b","2422":"n","1180":"\"","700":"\\","1380":"a","1457":"e","644":"\"","478":"u","801":"\"","3155":"{","165":"b","2909":"i","924":"h","1975":"\\","2454":"\\","36":"n","1364":"\\","2653":",","108":"\"","2644":"#","2107":"e","510":"\"","115":"\"","1270":":","2313":"5","1752":"\"","712":"g","1743":"b","1395":"a","1905":"n","201":"0","913":"p","1429":"s","813":"{","2930":"r","577":"e","2467":"r","2719":",","2703":"e","1736":"}","853":"a","2285":"c","3139":"t","2293":"R","1279":"\"","3208":"h","3197":":","1910":"\"","395":"a","1898":":","1014":"n","609":"o","2939":"4","1134":"\\","1126":"\\","326":"\\","2590":"l","3136":"s","2800":"\\","3199":"5","2419":"\"","257":"o","1062":"u","1819":"i","3201":",","129":"\"","1651":":","1206":"l","3067":"c","759":"c","600":"\"","1403":"a","365":"a","966":"k","2076":"\"","45":"\\","2512":"i","3190":"w","2951":"a","2809":"\\","2410":"\"","3005":"a","1071":"\"","1469":"\"","440":"\"","382":"c","2475":",","1982":"i","1658":"s","2011":",","406":"C","745":"\"","2921":"c","955":"g","2871":"5","336":"t","1331":"l","2502":"e","2958":"\\","2179":"a","1567":",","1298":",","3223":"o","2745":"\"","2309":"5","1801":":","2607":"n","1462":"i","1661":"/","860":"\\","2891":"z","1954":",","2067":"\\","zIndexMapData":"{\"1\":\"container-1\",\"2\":\"container-2\",\"3\":\"container-3\"}","405":"k","1304":"b","2672":"6","2664":"z","530":",","137":"s","2172":":","1291":"\"","2371":"\"","2223":"\\","2301":"\"","222":"\\","2360":"h","2009":"\\","1668":"u","3070":"t","1883":"m","1006":"b","1412":"a","1617":"\\","1020":"a","2722":"e","1311":"k","2272":"t","993":"5","524":"\\","1165":"s","885":",","2378":"R","1871":"v","893":"\"","1766":"n","2997":"\"","1686":"b","1679":"}","2795":"a","3079":"\"","2783":"e","1037":"i","2201":"a","252":"r","742":"\"","3102":"\"","1900":"\"","1107":"e","2868":"a","1602":"{","795":"l","8":"n","2979":"a","127":",","2837":"u","1516":"h","1289":"e","2369":",","3017":"1","2611":"e","2546":"\"","activeTabId":"\"containerTab\"","1670":"u","1226":"f","415":"\"","1928":"/","1796":"u","663":",","259":"o","1422":"r","2212":":","1943":"l","946":",","1234":"l","3186":"\"","1":"\"","2739":"a","63":"k","2529":"i","2970":",","1175":"e","2433":"\\","273":"\\","1286":"D","2425":"a","2757":"r","1514":"\"","wallpaper":"\"#241f31\"","233":"R","2132":"\"","2731":"i","2992":"l","426":"i","730":"5","3151":"a","3089":"L","2736":"\"","357":"e","837":"}","701":"\"","2140":"}","2676":"\\","1505":"\"","2083":"/","2095":"m","10":"r","1860":"h","941":"\"","3058":",","3096":"\\","3161":":","855":"n","3178":"\\","739":"9","2186":"\\","1110":":","2046":"}","2385":"\"","838":",","2687":"d","2968":"\"","2149":"I","154":"R","2153":"r","19":"s","2928":"t","1354":"\\","2985":"e","2691":"f","3051":"n","1029":"\"","1036":"W","1935":"d","3082":",","453":":","74":"\"","787":"l","1330":"o","2967":"\\","285":":","544":"\"","2824":"\\","329":"\"","1853":"r","2639":"\\","1707":"l","2559":"\\","2121":"}","3100":"\"","1258":"\\","479":"e","1437":"i","267":"r","595":"l","197":"\"","938":"t","583":"D","1623":"\"","820":"o","1896":"\\","2537":"\"","2257":"d","630":"g","3162":"\\","2855":"w","1981":"l","2768":"t","1344":"h","2632":"e","2624":"e","2128":"b","1690":"\"","1825":"\\","1253":"b","2333":"u","718":"\\","675":":","1446":"\\","657":":","1925":"p","1596":"o","933":"\\","3097":"\"","1628":"l","829":"a","1328":"r","2910":"o","639":"n","554":"h","2444":"d","490":"o","310":"\"","2763":"\\","1097":",","442":"n","2043":"m","2111":"S","1683":"\"","15":"a","844":"\\","711":"R","24":"{","2885":")","2494":"1","2897":"\\","375":"s","2699":"h","292":"\"","1522":"l","1154":"2","1538":"a","1141":"o","1840":"\\","2354":"e","1719":"/","1482":"d","2118":"n","691":"l","1557":"5","1776":"l","1042":"\"","2593":"a","2585":"\"","1586":"2","1836":"l","1098":"\\","2022":"h","2898":"\"","1734":"\\","2481":"t","2575":"\"","2248":"\"","174":"0","1681":"{","1531":"\\","677":"\"","25":"\\","1087":"\"","509":"\\","3033":"1","3025":"n","708":"d","1052":"b","275":"f","470":"o","1215":"t","809":"s","95":"x","466":"l","766":"l","1884":"\\","2901":"}","1963":"\"","567":"\"","975":"b","497":"\\","2521":"e","1729":"c","100":"\"","518":"i","2562":"\"","1195":"I","1547":"\"","3181":"7","707":"a","1383":"e","1458":"x","901":",","645":",","1641":"\\","800":"\\","270":"\\","164":"g","2238":",","3142":"g","1519":"o","1974":"2","3107":"v","2455":"\"","3114":"\"","236":"i","1365":"\"","2652":"\"","2635":"o","109":":","2645":"7","2108":"n","511":"h","114":"\\","1271":"\\","2310":",","1753":"}","1742":"a","1906":"d","202":",","1918":"\"","912":"3","2931":"v","574":",","942":":","2464":"o","2718":"e","2702":"d","1731":".","2284":"a","2292":"d","2282":"\"","1811":"/","3209":"t","1749":"\\","3198":"4","1083":"l","635":"\\","1911":",","394":"f","autoplayAudio":"false","1017":"l","608":"C","1135":"\"","1127":"\"","327":"\"","3137":"e","2299":":","2801":"\"","2418":"\\","2817":"Y","1063":"s","1818":"a","3202":"\\","3213":"5","1650":"\"","1207":"s","3060":"\"","3222":"t","2929":"e","3170":"\"","603":"v","1402":"f","2864":"\"","967":"g","2879":"5","1128":":","2077":"h","44":"1","2513":"c","3106":"i","2950":"p","1642":"\"","2413":"e","3196":"\"","2405":"r","3004":"M","1809":":","1068":"\"","249":"\"","1471":"e","213":"d","2774":"i","1237":"k","407":"o","3069":"n","1787":"m","1409":"\"","956":"s","347":"\\","2870":"2","337":"i","2518":"a","2160":"\"","1566":"5","1299":"\\","2746":"d","1800":"\"","2606":"e","1463":"g","2457":"e","1660":"/","863":"\\","875":"o","1994":"a","1953":"]","2066":",","54":"\\","774":"s","1303":"a","1319":"e","2667":"\"","533":"h","134":"i","2173":"\\","29":"\\","1718":":","2370":"\\","1879":"e","223":"\"","2006":"h","2705":"I","settingsMenuData":"{\"x\":\"1000px\",\"y\":\"51px\",\"width\":449,\"height\":550}","1694":"t","3258":"\n","1885":"\"","1614":"n","2069":"u","2394":"\"","1310":"c","1986":"\\","984":"b","1026":"0","992":"5","525":"\"","211":"W","1870":"i","890":"\"","2241":"h","1767":"k","2994":"e","709":"o","1678":"\"","2794":"h","2782":"c","670":"o","251":"o","3257":"}","247":",","2343":":","1603":"\\","344":"\\","2978":"W","124":"3","2866":"g","999":"0","2834":"w","2368":"\"","3016":"\"","2547":"l","3235":"\"","1960":"e","1229":"s","722":"b","414":"\\","2789":"\"","752":"\\","1795":"\"","662":"\"","258":"l","2197":":","1942":"g","1375":"d","2059":"\\","2526":"e","1174":"z","2432":"\"","1287":"a","2424":"N","2758":"\\","1777":"a","3098":"\\","2548":"i","2131":"\\","425":"S","2016":"l","731":"5","231":"e","3247":"s","1949":"/","1118":"f","3088":"o","2737":":","500":"c","830":"l","2141":",","2267":"\\","2084":"/","2096":"o","11":"M","1863":"p","editToggleRgba":"rgba(0,0,0,0)","492":"o","2442":"C","3059":"\\","947":"\\","854":"i","184":"k","2187":"\"","1111":"\\","3172":"\\","2041":"c","2386":":","839":"{","2686":"l","155":"g","480":",","2551":"C","2237":"\"","2374":"r","3044":"\"","1028":"\\","1936":"a","450":"e","758":"\"","445":"l","786":"a","2689":"\"","2966":"1","282":"e","547":"a","823":"I","1850":"\\","105":"h","2946":"w","2558":":","2120":"\"","1698":"c","1241":"o","834":"\"","921":"e","2586":"e","580":"b","1620":"[","821":"c","1895":"l","2278":"\"","2918":",","144":"b","631":"n","3163":"\"","2854":"o","2347":",","498":"\"","2771":"t","1859":"\"","1345":"e","2633":"r","2625":",","1691":":","1824":"m","1252":"f","2330":"g","1447":"\"","654":"X","1926":"s","1595":"i","932":",","2199":"\"","1327":"e","1338":"\"","2911":"n","557":"d","1149":"\"","2447":"\"","1848":"\"","313":"c","1569":"9","2762":"\"","1711":"\\","1096":"\"","683":"\"","2110":"U","699":"0","757":"\\","2283":"b","2339":"h","2903":"\\","cursors":"{}","1448":":","2886":"\\","2493":"\"","1639":"b","2489":"\\","2698":"\"","2240":"\"","293":"f","1523":"u","1155":"4","1539":"d","1140":"i","309":"\\","1841":"\"","2579":"1","3126":"e","1485":"X","501":"0","690":"B","2601":"u","799":",","2328":"c","1043":":","2594":"t","1185":",","462":"e","1585":":","2023":"t","1630":"\"","2899":":","2480":"c","2249":":","623":"t","298":"o","2843":"\"","1536":"s","1721":"w","1086":"\\","2570":"S","3125":"n","2230":"\"","3032":"-","2321":"\\","2340":"a","1450":"\"","274":"\"","3188":"\\","2861":"\"","2028":"/","1216":"i","808":"n","467":"e","769":"\"","80":"\\","2902":",","831":"I","566":"\\","976":"a","1382":"s","615":":","1728":"t","101":"h","1495":"\\","2100":"l","1263":"k","1546":"\\","2318":",","1378":":","706":"h","1459":"t","900":"\"","1640":"e","803":"e","814":"}","163":"r","2239":"\\","3141":"n","1973":"\"","2943":"\"","2710":"c","1739":"\\","2655":"\"","945":"1","2646":"7","2109":"-","512":"e","117":"i","2268":"\"","1268":"\\","1491":"0","2311":"2","1741":"l","1907":"a","203":"\\","3158":"x","1919":":","2228":":","2932":"a","575":"\\","3148":"D","1577":"z","2465":"l","1730":"h","331":"\\","2291":"n","1198":"l","1810":"/","2536":"\\","2194":"e","1908":"r","1912":"\\","393":":","1187":"\"","389":"l","2965":"3","1016":"A","2221":"\"","1136":"s","961":"\\","1120":"n","1716":"p","2476":"\\","2942":"]","3134":",","2298":"\"","2806":"\\","2814":"d","1060":"d","1479":"s","1076":"o","1039":"t","3212":":","3061":"3","2680":"a","380":"s","719":"\"","602":"i","1401":":","2865":"r","1962":"\\","2878":"2","1129":"\\","2510":"a","2949":"l","2168":"i","2505":"i","931":"9","2412":"r","3007":"D","1808":"s","1069":"0","1470":"l","2275":"g","2540":"a","404":"n","2923":"o","1408":"\\","957":"\\","2472":"\"","2816":"w","334":"e","2519":"l","2161":":","145":"a","1561":"5","1296":"s","2747":"i","1803":"\"","2605":"\"","1667":"o","1239":"o","862":",","874":"b","1001":"\\","1419":"i","1952":"}","958":"\"","35":"o","2061":"m","2725":"b","1302":"n","3108":"e","1318":"s","2279":":","532":"\"","135":"n","360":"i","2377":"r","1878":"l","2748":"v","898":"x","224":",","2007":"u","3072":"i","1410":"e","1959":"b","1615":"k","2068":"\"","2395":"b","1309":"o","1317":"l","1987":"\"","2270":"e","991":"2","1511":"\"","526":"8","2927":"n","1873":".","891":":","2995":"\"","2338":"p","342":"z","1677":"\\","1221":"l","2781":"\"","2203":"e","250":"b","1786":"g","3256":"\"","246":"\"","1101":"o","2051":"l","1600":"\"","3204":"h","345":"\"","797":"e","2977":"t","125":"6","1992":"\"","998":",","2835":"B","2367":"\\","2750":"d","408":"l","465":"b","2613":"l","1717":"s","969":"o","2139":"}","3236":"f","3006":"p","1228":"l","398":"e","723":"a","2788":"\\","1794":"\\","1038":"d","665":"\"","1420":"d","2214":"\"","1941":"o","948":"\"","2217":"7","517":"S","2058":":","2671":"1","2527":"c","266":"g","1173":"i","2435":",","1284":"l","2427":"e","2759":"\"","1770":"\"","2549":"n","1337":"\\","2130":"l","1397":"i","424":"k","728":",","3246":"r","1843":"r","1948":"m","1119":"o","2049":"\\","3087":"i","2734":"r","1492":"\\","843":"d","2142":"\\","2260":"\\","2154":"v","1503":"Y","2085":"d","2097":"z","1862":"t","882":"s","2982":"p","857":"r","185":"g","2184":"-","1112":"\"","2040":".","355":"\"","2387":"\\","2681":"d","3174":"y","2823":"0","2098":"i","481":"\\","1700":"\\","1321":"\\","434":"1","1249":"c","363":"I","3053":"r","3045":"c","2071":"l","1430":"e","929":"3","97":"\"","592":":","1937":"r","588":"e","451":"\\","76":"4","444":"b","1336":":","2688":"\\","283":"\\","546":"f","2779":":","1851":"\"","2656":"h","1725":"t","3254":"{","1699":"h","1240":"l","2449":"\\","1139":"t","265":"\"","581":"l","1621":"{","822":"k","776":",","1894":"e","531":"\\","2919":"\\","143":"\"","632":"\\","3146":"n","288":"\\","2853":"d","2346":"0","2770":"x","2543":"e","1528":"\\","1342":"\\","2634":"C","3159":"\\","2626":"\\","1692":"\\","1827":"}","2331":"r","1838":"\"","1440":"r","1927":":","2334":"n","1594":"t","3128":"T","3095":"\"","779":"c","2690":":","2912":"s","556":"a"} \ No newline at end of file
diff --git a/themes/modern_olive.txt b/themes/modern_olive.txt
new file mode 100644
index 0000000..d58f491
--- /dev/null
+++ b/themes/modern_olive.txt
@@ -0,0 +1 @@
+{"1148":"\\","2446":"\\","1849":",","312":"e","2353":"d","1710":":","1095":"\\","682":"\\","2117":"e","698":"\"","324":"\"","1831":"\"","1100":"f","1449":"\\","2887":"\"","2492":"\\","1638":"u","373":"a","2618":"\"","173":",","290":",","1520":"w","1156":"1","1147":"r","241":":","2578":"\"","307":"\"","689":"w","1484":"w","502":"b","697":"\\","1559":",","709":"o","2329":"k","1040":"h","2595":"e","1055":"d","3180":"1","1584":"\"","2020":"\\","2499":"\\","2487":"z","761":"o","88":":","622":"\"","299":"d","1529":"\"","1333":"r","1537":"h","1720":"/","1085":"r","2573":"e","2565":"\"","3124":"i","1192":"i","2308":"5","3035":"\"","3027":"a","2208":"\"","1451":"\\","642":"r","2588":"a","476":"t","1217":"o","1332":"o","2034":"g","768":"\\","81":"\"","3153":":","2231":"2","977":"\\","2849":"\"","2452":"\"","1820":"l","2320":")","1494":",","2101":"a","1502":"w","1260":"l","1541":"w","1276":"\"","2319":"0","1754":",","705":"s","903":"\"","915":"\\","1647":"r","802":"s","815":",","162":"\"","activeTabId":"\"containerTab\"","3140":"i","1972":"\\","2713":":","1137":"e","33":"\"","1363":",","2654":"\\","2647":"7","513":"a","116":"w","1269":"\"","2316":"5","1740":"\"","3191":"i","204":"\"","2229":"\\","2933":"l","572":"s","2462":"n","1733":"v","2648":"6","2290":"u","1571":")","1813":"w","350":"6","1909":"\\","1913":"\"","1657":"p","1200":"c","392":"\"","388":"o","1011":"r","960":"{","1121":"t","2070":"r","1927":":","43":"-","325":":","2941":"}","2957":"\"","3135":"\"","2807":"\"","2815":"o","2306":"(","1061":"i","1478":"\"","1077":"r","927":"\"","214":"t","3211":"\"","992":"5","399":",","387":"B","605":"d","1400":"\"","617":"\"","1961":"l","2877":",","2511":"l","2948":"l","2169":"d","3104":"c","2415":"\\","2407":"\"","1637":"t","1473":"t","1464":"n","1231":",","2014":"u","1009":"k","1785":"\"","304":"\\","950":"e","2968":"\"","2473":"\\","335":"c","2162":"3","2174":"\"","99":"\\","1560":"2","1297":"e","2740":"l","1802":"\\","2604":"\\","1666":"y","1238":"C","865":"n","1000":")","1418":"v","1951":"\"","959":":","2478":"s","2060":"\"","2724":"a","52":"m","1301":"e","983":"g","89":"\\","1163":"\\","2531":"n","883":"\\","2749":"i","899":"\\","1760":":","225":"\\","2793":"s","2004":"i","3073":"n","1958":"a","1612":"l","1608":":","2396":"o","59":"c","1308":"l","200":"0","1984":"k","1983":"n","990":",","527":"0","1346":"a","3011":"\"","1454":"\\","1872":"e","2199":"\"","1769":"\\","1676":"m","1220":"o","413":":","2164":",","2780":"\\","2202":"t","1428":"l","245":"\\","1102":"n","2050":"\"","65":"\"","796":"s","2679":"e","5":"t","2976":"a","122":"\"","1993":"l","2832":"d","2366":"0","2751":"e","1778":"b","2614":"o","235":"d","2138":"\"","3237":"a","720":"r","736":",","664":"\\","1427":"a","676":"\\","1940":"o","2670":"\"","2524":"\"","1172":"S","491":"l","613":"\\","1285":"e","16":"l","1771":":","2137":"\\","3238":"l","3024":"o","423":"n","729":"2","3245":"u","679":"\\","2048":"{","3086":"d","2735":"\\","832":"d","2143":"\"","152":"n","2155":"a","2725":"b","1500":"d","2086":"e","2090":"o","2429":"\"","1708":"\\","1352":"z","2983":"a","2869":"(","856":"e","1023":":","1438":"d","186":"r","2185":"2","198":":","1113":"\\","459":",","781":"o","2258":"t","2523":"\\","2822":"\"","2099":"l","482":"\"","1701":"\"","2553":"l","2988":":","2127":"a","1248":"#","3054":"-","1556":"2","3046":"o","1431":",","928":":","593":"f","191":"A","1938":".","589":"r","456":"l","1517":"a","77":"7","447":"D","1335":"\"","2964":"f","280":"a","3168":"x","549":"s","2778":"\"","1856":"\"","1629":"\\","1243":"\\","432":"\\","1255":"\\","264":"\\","935":"w","1626":"b","2610":"l","940":"\\","771":"f","1893":"b","142":"\\","633":"\"","289":"\"","2852":"a","2345":"0","2773":"l","1601":":","2765":",","1343":"\"","2627":"\"","1182":"6","439":"\\","2331":"r","717":":","1839":":","1441":"C","652":"o","3094":":","778":"\"","1325":"a","2693":"l","2913":"\\","149":"r","551":",","2859":"a","2441":"t","1846":"e","2352":"r","1713":"h","1348":"e","1094":"y","681":",","2116":"=","1551":"r","1829":"{","1048":"\"","1832":"l","2888":",","2491":":","2892":"I","372":"f","2242":"e","172":"0","291":"\\","1521":"B","1157":"f","1146":"o","23":"[","1373":"o","306":"\\","688":"o","1487":"\"","503":"f","696":":","1558":"5","2326":"b","1041":"\\","305":"\"","2596":"\\","1054":"r","2580":"6","3181":"7","1583":"\\","2021":"\"","2498":",","2486":"i","760":"l","1882":"o","179":"\\","561":"t","2841":":","2029":"/","1534":"\\","1084":"o","106":"t","2564":"\\","926":"\\","1193":"o","1549":"\\","3034":"\\","3026":"t","1385":"\\","1452":"\"","643":"\\","2589":"b","477":"r","1210":"\\","2037":"h","82":",","3152":"\"","3071":"a","2232":"2","970":"u","2848":"\\","2453":",","401":"\"","1497":"s","2102":".","1261":"i","1540":"o","1277":",","1755":"\\","3029":"n","902":"\\","2545":"\\","914":"x","1692":"\\","1646":"u","805":"t","816":"\\","161":"\\","1971":",","2712":"\"","2704":"r","32":"\\","1360":"6","2282":"\"","2640":"\"","2977":"t","1579":"n","2317":"5","2305":"a","3192":"d","1901":"c","1208":"e","1019":"h","2934":"I","968":"r","2078":"t","1732":"t","2289":"o","2649":"7","1570":"0","1812":"w","3219":"\"","1914":"u","1656":"t","1201":"\\","391":"\\","1010":"g","578":"n","1138":"c","1122":"C","2468":"\\","42":"r","2940":"7","2956":":","2804":"\"","2812":"h","2307":"2","1066":":","1074":"\"","215":"h","3210":"\\","237":"u","740":")","386":"n","2924":"c","374":"l","604":"i","1407":",","616":"\\","1960":"e","2876":"5","2403":"l","2516":":","3105":"t","2414":"y","2406":"\\","1472":"f","1465":"\\","1230":"e","2015":"r","402":"l","1008":"c","1784":"\\","951":"t","2470":":","3117":"\\","332":"\"","1082":"o","2669":"\\","2163":"}","535":"a","132":"t","2175":"c","1563":",","1294":"a","2741":"s","2376":"e","852":"t","1665":".","864":"\"","876":"o","1003":",","1417":"i","1950":"\\","2479":"e","2063":"n","2727":"e","51":"a","1300":"\"","982":"r","821":"c","1162":",","3019":"\"","880":"r","2375":"d","87":"\"","896":"9","1761":"{","226":"\"","2792":"\"","2005":"t","3074":"e","2584":"\\","879":"a","1613":"i","1609":"{","2397":"r","58":"\"","3112":"I","989":"5","2777":"\\","1513":"\\","1169":"i","3010":"a","1875":"o","748":"n","2993":"s","1675":"o","1223":"\\","2799":"X","412":"\"","1793":",","256":"C","244":"0","1103":"t","2053":"b","1606":"\\","66":",","791":"\"","2678":"h","4":"n","2975":"e","123":":","1990":"{","2833":"o","2365":"\"","2752":"r","1779":"e","2615":"c","2542":"s","2998":"z","3230":"d","721":"g","737":"0","667":"h","1426":"f","2216":"6","671":"w","543":"\\","2525":"s","1508":"\"","1171":"n","2437":"\"","17":"u","1865":":","2603":",","1772":"[","2136":"2","3239":"s","422":"i","2017":"\\","3022":"\"","3244":"c","678":"0","1631":":","2380":"d","353":",","789":"c","833":"\\","2144":"c","2262":":","153":"d","2156":"l","2300":"\\","1501":"o","2087":"v","2091":"p","2428":"\\","673":"\\","1709":"\"","1353":"e","2980":"l","288":"\\","429":"\\","851":"n","1022":"\"","1439":"e","187":"o","2182":"e","1930":"c","1114":"\"","2042":"o","358":"c","780":"l","2683":"r","2259":"h","541":"l","2821":"\\","483":"h","1702":",","2552":"o","2989":"\"","2126":"l","3055":"3","3047":"n","2394":"\"","1432":"\\","188":"u","590":"\\","192":"l","1939":"g","586":"i","457":"s","78":"p","446":"e","119":"t","2532":"B","2252":",","2506":"o","281":"m","3169":"\\","548":"l","1857":":","3118":"\"","1242":"r","431":":","1254":"c","263":":","922":"i","1593":"c","934":"\"","1627":"e","368":"c","1892":"a","141":"{","559":"r","2851":"h","2344":"1","2772":"A","315":"i","2764":"\"","1340":"\"","2636":"l","2620":"f","1183":"\\","438":",","1821":".","2337":"l","714":"a","1442":"o","653":"w","1921":"\"","2880":"5","1324":"e","2692":"a","2914":"\"","148":"g","550":"e","2858":"b","2440":"n","1847":"\\","2351":"o","1712":"\"","1349":"r","680":"\"","2115":"l","1550":"\"","1828":",","1049":",","34":"c","1833":"a","3173":"\"","2889":"\\","2490":"\"","2893":"n","371":":","2243":"i","171":",","296":"t","569":"f","1145":"l","22":"\"","1370":"e","2587":"n","1486":"\\","504":"b","695":"\"","2327":"a","2277":"\\","1046":"0","2597":"\"","1057":"r","272":",","3182":"0","3175":"\\","1582":"x","234":"a","1218":"n","90":"\"","2485":"S","1881":"c","2904":"\"","624":"e","178":",","872":"\\","560":"I","2840":"\"","1535":"\"","147":"k","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"clock\",\"x\":\"248px\",\"y\":\"147px\",\"height\":180,\"width\":321,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"#8c7d0f\",\"headerSize\":\"80\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":1,\"clockBold\":true},\"sections\":{},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"date\",\"x\":\"248px\",\"y\":\"214px\",\"height\":162,\"width\":182,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":true,\"enableClock\":false,\"headerColor\":\"#646d1f\",\"headerSize\":\"18\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"clockBold\":false,\"dateItalic\":false},\"sections\":{},\"clockIntervalId\":3},{\"id\":\"container-3\",\"name\":\"bookmarks\",\"x\":\"245px\",\"y\":\"240px\",\"height\":443,\"width\":82,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#51921c\",\"sectionSize\":\"0\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#8c7d0f\",\"linkSize\":\"16\",\"linkDecor\":false,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://www.youtube.com\"},{\"label\":\"twitch\",\"url\":\"https://www.twitch.tv\"}],\"label\":\"1\"},\"1\":{\"links\":[{\"label\":\"gmail\",\"url\":\"https://www.gmail.com\"},{\"label\":\"drive\",\"url\":\"https://drive.google.com\"},{\"label\":\"calendar\",\"url\":\"https://calendar.google.com\"}],\"label\":\"2\"},\"2\":{\"links\":[{\"label\":\"github\",\"url\":\"https://www.github.com\"},{\"label\":\"mdn\",\"url\":\"https://developer.mozilla.org/en-US/?hl=en\"}],\"label\":\"3\"}},\"clockIntervalId\":4}]","1722":"w","1379":"f","107":"\\","2567":"i","1190":"c","1548":":","3037":"\\","3021":"\\","1384":",","1453":",","2196":"\"","640":"t","824":"n","474":"\"","1211":"\"","2036":"t","83":"\\","2711":"\\","169":",","2233":"9","3147":"u","971":"n","2450":"\"","1368":"a","362":"n","1496":"\"","2103":"o","514":"d","111":"5","1266":"z","2867":"b","1274":"6","1756":"\"","1747":"\"","1391":"e","905":"\\","308":",","917":",","1645":"\"","804":"c","3121":"n","208":"d","817":"\"","3158":"x","160":":","1970":"}","2715":"a","2707":"a","31":":","1361":"\\","2281":"\\","2297":"\\","1578":"I","2314":",","3193":"t","1902":"a","206":"o","1209":",","1492":"\\","1018":"p","2935":"d","1030":"b","570":"a","1130":"\"","2049":"\\","2460":"i","2079":"t","322":"r","2288":"r","3132":"\"","1164":"\"","1573":"\"","1715":"t","1815":".","3218":",","1717":"s","1915":"r","753":"\"","1655":"t","1202":"\"","390":"d","131":"e","2215":"2","2214":"\"","1013":"u","1968":"\\","579":"a","1123":"o","2469":"\"","41":"e","2947":"a","2955":"\"","2805":"0","2813":"a","2304":"b","3009":"t","1067":"\\","1075":"b","3206":"i","216":"\\","3217":"\"","741":"\\","385":"o","607":"r","1406":"e","611":"o","1967":"1","2875":"5","2517":"f","3102":"\"","2417":",","2818":"\\","3000":"n","1805":"t","770":":","125":"6","1475":"\"","1576":"\"","1466":"\"","1233":"\"","403":"i","1783":":","2559":"\\","952":"t","2471":"\\","3176":"\"","908":"\\","333":"s","2668":":","534":"e","2509":"t","2176":"o","1562":"5","2426":"m","1295":"l","888":"x","2742":"e","962":"\"","1664":"w","2922":"l","867":"m","871":":","1002":"\"","488":"r","1416":"D","2062":"d","2726":"l","754":":","2663":"i","981":"\"","138":"\\","997":"5","520":"e","3018":"\\","1723":"w","881":"k","3203":"\"","897":"p","1762":"\\","949":"s","227":"b","2791":"\\","2002":"\"","3075":"r","2787":"r","2205":"\"","878":"m","1610":"\\","2390":"\\","343":"e","2274":"n","3113":"d","988":"5","2541":"l","1998":"\\","1512":",","1168":"t","1649":"\\","3013":"\"","1874":"g","2990":"f","1674":"c","1222":"d","2798":"w","411":"\\","1032":"r","255":"r","2192":"a","243":"\"","1619":":","2052":"a","1607":"\"","67":"\\","790":"\\","3":"o","2974":"p","120":"h","1179":"\\","1991":"\\","2830":"h","1282":"a","2364":"\\","2753":"C","2616":"k","3227":"y","2999":"I","3231":"i","726":"5","734":"5","1799":"\\","666":"s","1425":":","1946":"c","1314":":","2388":"\"","2732":"d","68":"\"","2522":",","1509":"0","1170":"o","2436":"\\","14":"V","2420":"f","1864":"s","2488":"e","1773":"{","3122":"t","2135":"\"","421":"l","859":"3","3243":"\"","2381":"i","3028":"i","788":"i","2145":"l","2263":"1","150":"o","2157":"I","2829":"s","2088":"e","2092":"e","1350":"S","2981":"l","3205":"e","428":"e","850":"o","1025":"0","2032":"w","180":"\"","2183":"r","598":",","1931":"a","1115":",","70":"\\","359":"t","783":"k","2682":"e","2963":"1","3001":"d","2158":"d","540":"o","2820":":","2918":",","484":"e","2227":"\"","1703":"\\","2555":"r","2125":"\"","3056":"\\","3040":"\\","2842":"\\","1433":"\"","189":"n","591":"\"","193":"p","587":"d","454":"f","79":"x","441":"e","2533":"o","2253":"\\","3166":"0","1396":"l","1854":"l","2628":"h","1245":":","430":"\"","1257":",","1929":"/","262":"\"","1592":"e","937":"d","1624":"l","369":"\\","1891":"l","140":":","2433":"\\","558":"e","2850":"s","2448":":","494":"\\","2775":"g","2359":"t","2767":"\"","1341":",","2637":"o","2621":"a","1695":"w","3068":"o","1687":"e","840":"\\","715":"\\","2119":"\\","1443":"l","650":"a","1922":"h","2881":",","1599":"\\","379":"\"","1323":"h","2695":"e","2915":":","1526":"\"","553":"\"","3149":"a","2443":"o","1844":"i","1510":"\\","2350":"b","301":"\\","2114":"h","1553":"b","1834":"b","751":"x","2026":"s","1635":"o","98":",","370":"\"","1889":"\\","170":"0","297":"C","568":":","1144":"o","21":":","1371":"r","1489":"\\","505":"c","694":"\\","2919":"\\","2324":"\\","341":"i","1047":"\\","2598":":","1056":"e","648":"s","271":"\"","2582":"\"","1581":"e","2271":"t","1219":"B","91":"1","762":"c","1880":".","2905":"s","627":"A","563":"l","979":":","2458":"c","925":"t","28":"d","2574":"\\","104":"g","2566":"l","1191":"t","3036":",","3080":"}","3020":":","1387":"h","1399":"\\","641":"e","475":":","1212":"s","250":"b","463":"n","3150":"t","2234":"p","316":"o","1978":"{","972":"d","2451":"\\","39":"i","212":"i","1369":"d","1089":"\\","2104":"r","515":"e","110":"1","1267":"e","1542":"R","1275":"\\","1757":"1","1746":"\\","1390":"d","904":"y","916":"\"","240":"\"","1411":"n","1644":"\\","807":"o","468":"C","810":"\\","2714":"f","1985":"s","30":"\"","2659":"d","2280":"{","2642":"\\","2315":"2","1758":"\\","3194":"h","207":"r","919":"\"","2224":"\"","2936":"\\","571":"l","1131":"\\","2461":"o","49":"\"","2709":"i","323":"\\","3133":"\"","2349":"\"","2890":"\"","1572":"\\","464":"a","1814":"w","2673":"\\","1916":"l","1654":"h","1203":":","3064":":","1012":"o","2222":",","619":"\"","963":"b","2073":"\"","40":"n","328":"\\","2954":"r","2847":",","2810":"\"","3008":"a","1064":"\\","1021":"\\","1072":",","3207":"g","3216":"}","1738":",","2012":"\\","746":"z","2571":"i","2926":"I","606":"e","1405":"s","55":"\"","1966":"\"","1685":"a","2874":"2","1947":"o","2514":"\\","847":"\\","2501":"s","3103":"a","2416":"\"","2819":"\"","2400":"r","3003":"x","1804":"h","1474":"\\","2602":"e","218":":","2434":"\"","1232":"\\","400":"\\","2835":"B","1782":"\"","1957":"l","953":"i","2476":"\\","1307":"C","330":",","1372":"B","537":"e","2508":"I","130":"s","2177":"n","1292":":","889":"\\","489":"C","2743":",","2609":"b","1398":"c","670":"o","866":"a","870":"\"","1005":"\"","1789":"i","1415":"e","3062":"\\","2690":":","2398":"d","2721":"\"","1751":"\\","2662":"S","980":"\\","139":"\"","996":"5","521":"\\","1160":"\\","381":"e","2404":"o","886":"\\","894":"1","1763":"\"","228":"o","2790":",","2003":"g","419":"\\","3076":"-","2786":"e","2204":"\\","3253":"\"","1611":"\"","3063":"\"","2391":"\"","340":"S","798":"}","3110":"a","128":"\\","1999":"\"","1515":"s","2000":":","3012":":","2661":"r","1877":"g","2991":"a","54":"\\","636":"\"","1673":".","1225":":","410":"r","1791":"\\","1321":"\\","254":"e","2211":"\"","2193":"m","242":"\\","2055":"l","1604":"\"","60":"l","793":"f","2":"c","121":"\\","1988":":","1178":":","1996":"e","2831":"a","1283":"b","2363":":","2754":"o","7":"i","2130":"l","2617":"\\","519":"z","3232":"o","727":"5","735":"5","1798":"l","669":"d","1424":"\"","2198":"\\","249":"\"","2838":"r","2389":"0","2733":"e","69":"x","167":"(","2675":",","158":"\\","573":"e","1506":":","2080":"p","2439":"o","2423":"t","1867":"/","1358":"\"","2134":"\\","1262":"n","1979":"\\","420":"\"","858":"-","3242":",","2045":"\"","3083":"\"","351":"\\","2146":"o","516":"r","151":"u","2150":"n","2828":"\"","2165":"{","2093":"r","1351":"i","2986":"r","704":"\"","564":"i","3048":"t","1024":"1","181":"b","2180":"i","3249":"r","1932":"l","2040":".","1116":"\\","71":"\"","449":"t","782":"c","3178":"\\","2962":"4","286":"\\","2159":"\\","2827":"\\","485":"a","1704":"\"","2554":"o","2124":"\\","61":"o","1615":"k","3057":"\"","3041":"\"","1690":"\"","1434":"d","596":"s","194":"h","584":"i","455":"a","361":"o","1899":"\\","1775":"\"","2530":"o","3171":",","635":"\\","3167":"p","1636":"u","1099":"\"","1855":"\\","1735":"\"","2572":"z","2629":"e","1188":"s","1244":"\"","437":"\"","1256":"\"","848":"\"","1680":",","658":"\\","261":"\\","1591":"s","936":"i","3092":"k","1625":"a","826":"e","772":"a","1296":"s","1158":"3","2748":"v","2342":"\"","495":"\"","317":"n","2358":"d","2766":"\\","309":"\\","1092":"r","687":"d","2622":"l","1181":"1","1823":"o","841":"\"","2335":"d","651":"d","1923":"t","2882":".","1598":"s","2497":"\"","2894":"d","378":"\\","1322":"\"","2694":"s","1468":"\\","2916":"{","1527":":","552":"\\","1151":"\\","2442":"C","1845":"v","2357":"i","300":"e","1481":"a","1552":"g","1835":"e","279":"N","1589":"\\","2027":":","1634":"y","1888":"{","2401":"C","1033":"d","177":"\"","294":"o","1532":"\"","3241":"\"","20":"\"","1376":"\\","3129":"a","1488":":","506":"\\","1199":"i","943":"2","2325":"\"","1044":"\\","2599":"t","1051":"\"","649":"h","2583":",","360":"i","1580":"d","92":"1","2031":"w","1887":",","84":"\"","2906":"e","626":"t","562":"a","2846":"\"","2459":"t","2336":"A","634":":","1724":".","1081":"C","2577":"\\","1499":"a","2561":"\\","118":"d","1196":"t","3039":"2","3023":"c","702":",","1386":"\"","1455":"\"","646":"\\","1213":"e","460":"\\","818":"c","3157":"\"","2235":"x","3145":"e","1977":":","973":"R","2456":"s","38":"a","1366":"h","2651":"\\","1088":":","1490":"\"","2105":"g","113":",","1264":"S","2250":"4","1272":"\"","1750":"\"","1389":"a","1745":"l","1393":"I","907":":","911":"6","2266":",","806":"i","469":"l","811":"\"","1795":"\"","2717":"s","2701":"a","2658":"a","2287":"g","2643":"\"","2295":"b","877":"k","1759":"\"","3195":"\\","918":"\\","397":"s","1334":"\\","2225":"y","2937":"\"","1132":"\"","1124":"d","48":"\\","2708":"l","3130":"b","2802":":","3101":",","1575":"\\","1817":"m","775":"e","2072":"\\","1917":"\\","1653":"\"","1204":"f","3065":"\\","3187":",","618":"\\","964":"a","620":",","2074":":","47":",","2945":"\"","repeatWallpaper":"false","2953":"e","1693":"\"","2811":"s","2408":":","1065":"\"","3225":"l","1467":":","1073":"\\","210":"r","3215":"9","528":"\\","747":"I","756":",","1404":"l","2862":":","1965":"\\","2873":",","978":"\"","338":"o","2515":"\"","2500":"\"","1565":"5","3002":"e","1807":"p","1477":"\\","1078":"d","1460":"A","1663":"w","1161":"\"","2268":"\"","2247":"\\","2592":"D","2302":"r","1781":"\\","1956":"\"","2477":"\"","2065":"\"","2729":"i","57":"\\","1306":"e","331":"\\","2166":"\\","3109":"T","2170":"\\","1293":"f","2373":"o","2608":"a","220":"\"","3183":"p","219":"\\","869":"\\","873":"\"","1004":"\\","1788":"a","2504":"t","2399":"e","2720":"\\","348":"\"","1313":"\"","987":"2","539":"B","230":"d","995":"2","522":"\"","1167":"c","887":"\"","895":"5","1764":"l","229":"r","3154":"\"","2797":"o","418":",","3077":"2","2785":"t","2207":"\\","2219":"x","3252":":","1105":"a","2392":",","1421":"e","2688":"\\","3111":"b","1980":"\"","2839":"\\","3015":"\\","1876":"o","3220":"a","238":"s","1672":"e","2195":"\\","1224":"\"","417":"\"","1790":"l","661":"\\","2210":"\\","2190":"\"","944":"9","2054":"e","2925":"k","1605":"0","792":":","1890":"\"","2972":"r","1989":"[","1997":"l","1280":"e","2362":"\"","2755":"l","1774":"\\","759":"c","3229":"u","3233":"\"","1826":"\"","724":"(","732":",","668":"a","672":"Y","1944":"e","248":"\\","2730":"v","835":":","2674":"\"","2520":"s","1507":"\\","2081":"s","2438":"f","1015":"d","2657":"e","12":"a","1866":"/","1359":"1","2463":"C","2544":",","2776":"n","2484":"n","2188":",","2044":"\\","2383":"s","2685":"o","2147":"c","156":"b","2151":"t","246":"\"","2449":"\\","1869":"r","1356":":","2987":"\"","3049":"a","1027":",","182":"a","2181":"n","1933":"e","1117":"\"","1109":"\"","72":":","448":"a","785":"t","2538":":","2961":"2","287":"\"","542":"d","2826":",","486":"d","1705":"u","2557":"\"","2123":",","625":"x","3042":":","2296":"a","1435":"i","269":"y","597":"e","195":"a","585":"v","1696":"i","366":"l","443":"a","1339":"\\","2255":"w","3228":"A","2857":"g","2630":"a","1093":"e","1189":"e","1247":"\"","436":"\\","1251":"b","849":"c","1444":"o","659":"\"","260":"r","1590":"\"","931":"9","2203":"e","3091":"n","827":"r","1159":"1","2341":"\\","496":":","2860":"\\","954":"n","2761":"\\","1091":"g","686":"a","2113":"?","2623":"s","1697":"t","1681":"{","846":":","713":"b","133":"t","2883":"9","2496":"\\","2895":"e","377":",","1920":"\\","2697":"\\","2245":"h","2917":"}","1524":"r","3093":"\"","1152":"\"","1143":"C","2348":"\\","1842":"d","319":"o","2356":"W","303":":","1480":"h","693":"r","1555":"(","2591":"e","1059":"a","278":"t","3184":"x","1588":",","2024":"t","3119":"c","1633":"\"","2039":"b","2483":"o","176":"\\","765":"o","295":"n","1618":"\"","1533":",","27":"i","1377":"\"","2569":"k","507":"\"","3031":"r","2909":"i","2322":"\"","1045":"\"","1050":"\\","277":"n","2612":"C","472":"k","93":"2","2030":"w","1886":"}","85":"y","3170":"\"","2907":"c","629":"i","3116":"\"","565":"c","2845":"\\","749":"d","1727":"i","1080":"r","102":"e","1498":"h","2560":"\"","3123":"a","1197":"a","1545":"a","3038":"\"","701":"\"","1381":"l","1456":"t","647":"\"","1643":",","461":"\"","819":"l","3156":"\\","2236":"\\","2641":":","352":"\"","3144":"M","1976":"\"","2457":"e","37":"t","1367":"e","2650":"b","2251":"6","1493":"\"","2106":"/","825":"t","112":"9","1265":"i","1273":"1","2312":"5","1414":"l","1388":"e","1744":"e","1392":"r","1904":"e","906":"\"","910":"2","199":"1","812":":","1318":"s","576":"\"","2276":"s","2466":"o","2382":"u","2547":"l","1737":"]","2286":"k","3138":"t","2294":"g","614":"\"","1278":"\\","3196":"\"","396":"l","3085":"u","2226":"\\","2938":":","1133":",","1125":"e","2197":":","321":"o","3131":"\\","2803":"\\","1574":",","320":"l","1816":"g","3200":"3","1652":"\\","1205":"a","3066":"\"","383":"t","1316":"a","601":"d","965":"c","2075":"\\","46":"\"","2944":",","2952":"p","2808":",","2411":"g","3120":"o","209":"e","2303":"g","2607":"n","1070":"\\","211":"W","3214":"2","1235":"i","1659":":","2010":"\"","409":"o","744":"\\","2920":"\"","612":"r","1964":":","2872":"5","339":"n","2503":"c","2959":"\"","2178":"t","1564":"2","2744":"\\","2402":"o","1806":"t","1476":",","2600":"r","1461":"l","1662":"w","861":"\"","2019":":","1780":"l","1714":"t","1955":"\\","2474":"\"","2064":"\\","2728":"D","56":":","1305":"l","1079":"e","2665":"e","2167":"\"","531":"\\","136":"g","909":"\"","2171":"\"","999":"0","1290":"\\","2372":"b","2700":"e","221":"0","2008":"b","1669":"t","2863":"\\","868":"e","3189":"\"","1007":"a","1413":"b","1616":"s","2723":"n","1394":"t","1312":"\\","2273":"i","538":"r","994":",","523":":","1166":"e","1688":"l","884":"\"","159":"\"","892":"\\","1765":"i","2996":",","842":"i","2796":"d","2001":"\\","3078":"\\","2784":"n","1034":"e","2206":",","253":"d","2218":"p","3251":"\"","1106":"m","2431":"\\","2393":"\\","346":":","9":"e","126":"3","3134":",","2836":"l","1288":"t","3014":"{","3221":"u","239":"\\","3177":":","1671":"b","1227":"a","416":"\\","1797":"r","660":"0","1423":"\\","2213":"\\","2191":"n","947":"\\","2421":"o","2057":"\"","2738":"f","62":"c","2528":"t","0":"{","2971":"\"","1176":"\\","2430":":","96":"\\","1281":"n","2361":"\\","2756":"o","923":"g","2619":":","232":"r","2133":":","427":"z","725":"2","2409":"\\","733":"2","2254":"\"","3255":"}","356":"s","836":"2","2677":"\"","2265":"3","1504":"\\","2082":":","2094":".","13":"p","1861":"t","738":".","2189":"\\","3240":"e","1648":"l","1150":":","2047":",","2384":"\\","3081":"\"","750":"e","2684":"B","2969":"\"","2148":"k","157":"a","2152":"e","1903":"l","18":"e","1868":"d","1357":"\\","2984":"p","3050":"i","1177":"\"","183":"c","1934":"n","452":"\"","314":"t","73":"\\","784":"I","327":"\"","2960":"#","284":"\"","545":":","2825":"\"","1852":"u","857":"r","2638":"r","1706":"r","1362":"\"","2556":"\\","2122":"]","1259":"\"","530":",","3043":"\\","1436":"v","268":"e","594":"a","196":"\\","939":"h","582":"e","3099":"\"","1622":"\\","367":"i","1897":"\"","146":"c","2256":"i","637":"c","3165":"8","794":"a","2856":"R","2769":"e","1347":"d","2631":"d","3052":"e","2129":"e","1186":"\\","1246":"\\","435":"6","1689":"\\","1250":"0","2332":"o","2067":"\\","1445":"r","656":"\"","1924":"t","3248":"o","1597":"n","930":"4","3090":"i","828":"v","1329":"C","2209":"x","638":"e","555":"e","2445":"e","497":"\\","311":"s","2035":"i","2760":":","1090":"\"","685":"h","2112":"/","2261":"\"","1682":"\\","710":"w","2884":"0","2495":"6","2896":"x","610":"l","376":"e","1320":",","2246":"t","1525":"\\","1153":"#","1142":"n","318":"C","1184":"\"","2355":"r","302":"\"","3179":"\"","1483":"o","692":"u","1554":"a","1830":"\\","1837":"\\","1058":"R","3185":"\\","1587":"}","2025":"p","1632":"\\","2038":"u","2482":"i","1355":"\"","621":"\\","175":")","1530":"0","26":"\"","1374":"l","2568":"n","508":",","3030":"e","2323":",","1053":"o","276":"o","1969":"\"","473":"\\","1214":"c","94":"p","2033":".","767":"d","86":"\\","2900":"3","628":"l","1858":"\\","974":"g","2844":"0","2118":"n","1726":"w","103":"i","743":",","2563":",","1194":"n","1544":"b","2422":"n","1180":"\"","700":"\\","1380":"a","1457":"e","644":"\"","2973":"e","478":"u","801":"\"","3155":"{","165":"b","2237":"\"","3143":"s","1975":"\\","2454":"\\","1767":"k","36":"n","1364":"\\","2653":",","108":"\"","2644":"#","2107":"e","510":"\"","115":"\"","1270":":","2313":"5","1752":"\"","712":"g","1743":"b","1395":"a","1905":"n","201":"0","913":"p","813":"{","2930":"r","577":"e","2467":"r","2719":",","2703":"e","1736":"}","853":"a","2285":"c","3139":"t","2293":"R","1279":"\"","3208":"h","3197":":","1910":"\"","395":"a","1898":":","1014":"n","609":"o","2939":"4","1134":"\\","1126":"\\","326":"\\","2590":"l","3136":"s","2800":"\\","3199":"5","2419":"\"","257":"o","1062":"u","1819":"i","3201":",","2716":"l","129":"\"","1651":":","1206":"l","3067":"c","382":"c","600":"\"","1403":"a","966":"k","2076":"\"","45":"\\","2512":"i","3190":"w","2951":"a","2809":"\\","2410":"\"","3005":"a","1071":"\"","1469":"\"","440":"\"","1982":"i","1658":"s","2011":",","406":"C","745":"\"","2921":"c","955":"g","2871":"5","336":"t","2942":"]","1331":"l","2502":"e","2958":"\\","2179":"a","1567":",","1298":",","2745":"\"","2309":"5","1801":":","audioLink":"\"\"","1462":"i","1992":"\"","2244":"g","1315":"f","1661":"/","860":"\\","2046":"}","2891":"z","1954":",","2475":",","zIndexMapData":"{\"1\":\"container-1\",\"2\":\"container-2\",\"3\":\"container-3\"}","405":"k","1304":"b","2672":"6","2664":"z","1822":"c","137":"s","2172":":","1291":"\"","2371":"\"","2223":"\\","2301":"\"","222":"\\","2360":"h","2009":"\\","1668":"u","3070":"t","1883":"m","1006":"b","1412":"a","1617":"\\","2722":"e","1311":"k","985":"a","993":"5","524":"\\","1165":"s","885":",","2378":"R","1871":"v","893":"\"","1766":"n","2997":"\"","1686":"b","1679":"}","2795":"a","3079":"\"","2783":"e","1037":"i","2201":"a","252":"r","742":"\"","3250":"s","1900":"\"","1107":"e","2868":"a","1602":"{","795":"l","8":"n","2979":"a","127":",","2837":"u","1516":"h","1289":"e","2369":",","3017":"1","2611":"e","2546":"\"","3234":":","1670":"u","1226":"f","415":"\"","1928":"/","1796":"u","663":",","259":"o","1422":"r","2212":":","675":":","946":",","1234":"l","3186":"\"","2056":"\\","2739":"a","63":"k","2529":"i","2970":",","1175":"e","1995":"b","273":"\\","1286":"D","2425":"a","2757":"r","1514":"\"","1776":"l","233":"R","2132":"\"","2731":"i","2992":"l","426":"i","730":"5","3151":"a","3089":"L","2736":"\"","357":"e","837":"}","2140":"}","2676":"\\","1505":"\"","2083":"/","2095":"m","10":"r","1860":"h","3058":",","855":"n","739":"9","1600":"\"","2186":"\\","986":"(","1110":":","2660":"e","2385":"\"","838":",","2687":"d","2330":"g","2149":"I","154":"R","2153":"r","19":"s","2928":"t","1945":".","1354":"\\","2985":"e","1895":"l","1937":"r","3051":"n","1029":"\"","1036":"W","1935":"d","3082":",","453":":","74":"\"","787":"l","1330":"o","2967":"\\","285":":","544":"\"","2824":"\\","329":"\"","1853":"r","2639":"\\","1707":"l","2537":"\"","2121":"}","3100":"\"","1258":"\\","166":"a","1827":"}","479":"e","1437":"i","267":"r","595":"l","197":"\"","938":"t","583":"D","1623":"\"","364":"t","1896":"\\","145":"a","2257":"d","630":"g","3162":"\\","168":"0","2855":"w","1981":"l","2768":"t","1344":"h","2632":"e","2624":"e","2128":"b","1187":"\"","1825":"\\","1253":"b","2333":"u","718":"\\","2763":"\\","1446":"\\","657":":","1925":"p","1596":"o","933":"\\","3097":"\"","1628":"l","829":"a","1328":"r","265":"\"","2910":"o","639":"n","554":"h","2444":"d","490":"o","310":"\"","1716":"p","1097":",","684":"s","2043":"m","2111":"S","1683":"\"","15":"a","844":"\\","711":"R","24":"{","2885":")","2494":"1","2897":"\\","375":"s","2699":"h","292":"\"","1522":"l","1154":"2","1538":"a","1141":"o","1840":"\\","2354":"e","1719":"/","493":"r","1482":"d","500":"c","691":"l","1557":"5","1042":"\"","2013":"\"","2593":"a","2585":"\"","1586":"2","1836":"l","1098":"\\","2022":"h","2898":"\"","1734":"\\","2481":"t","2575":"\"","2248":"\"","174":"0","1104":"N","1531":"\\","2814":"d","25":"\\","1087":"\"","3164":"6","2346":"0","509":"\\","3033":"1","3025":"n","708":"d","1052":"b","275":"f","470":"o","1215":"t","809":"s","95":"x","466":"l","766":"l","1884":"\\","2901":"}","1963":"\"","567":"\"","975":"b","2521":"e","1729":"c","100":"\"","518":"i","2562":"\"","1195":"I","1547":"\"","707":"a","1383":"e","1458":"x","901":",","645":",","1641":"\\","800":"\\","270":"\\","164":"g","2238":",","3142":"g","1519":"o","1974":"2","3107":"v","2455":"\"","3114":"\"","236":"i","1365":"\"","2652":"\"","2635":"o","109":":","2645":"7","2108":"n","511":"h","114":"\\","1271":"\\","2310":",","1753":"}","1742":"a","1906":"d","202":",","1918":"\"","912":"3","2931":"v","574":",","942":":","2464":"o","2718":"e","2702":"d","1731":".","2284":"a","2292":"d","1941":"o","1811":"/","3209":"t","1749":"\\","3198":"4","1083":"l","50":"n","1911":",","394":"f","autoplayAudio":"false","1017":"l","2220":"\\","2377":"r","1135":"\"","1127":"\"","2943":"\"","969":"o","3137":"e","2299":":","2801":"\"","2418":"\\","2817":"Y","1063":"s","1818":"a","3202":"\\","3213":"5","820":"o","1650":"\"","1207":"s","3060":"\"","3222":"t","2929":"e","603":"v","1402":"f","2864":"\"","967":"g","2879":"5","1128":":","2077":"h","44":"1","2513":"c","3106":"i","2950":"p","1642":"\"","2413":"e","2405":"r","3004":"M","1809":":","1068":"\"","1471":"e","213":"d","2774":"i","1237":"k","407":"o","3069":"n","205":"b","1787":"m","1409":"\"","956":"s","347":"\\","2870":"2","337":"i","2518":"a","665":"\"","2160":"\"","1566":"5","1299":"\\","2746":"d","1800":"\"","2606":"e","1463":"g","2995":"\"","1660":"/","863":"\\","875":"o","1994":"a","1953":"]","2066":",","2539":"f","774":"s","1303":"a","1319":"e","2667":"\"","533":"h","134":"i","2173":"\\","29":"\\","1718":":","2370":"\\","1879":"e","223":"\"","2006":"h","2705":"I","settingsMenuData":"{\"x\":\"999px\",\"y\":\"54px\",\"width\":457,\"height\":558}","2770":"x","1694":"t","3258":"\n","1885":"\"","1614":"n","2069":"u","3226":"a","1310":"c","1986":"\\","984":"b","1026":"0","529":"\"","525":"\"","1870":"i","890":"\"","2241":"h","2691":"f","2994":"e","2576":":","1678":"\"","2794":"h","608":"C","2782":"c","2200":"d","251":"o","3257":"}","247":",","2343":":","1603":"\\","344":"\\","2978":"W","124":"3","2866":"g","2269":"s","2834":"w","2368":"\"","3016":"\"","3223":"o","3235":"\"","1229":"s","722":"b","414":"\\","2789":"\"","752":"\\","1039":"t","662":"\"","258":"l","674":"\"","1942":"g","1375":"d","2059":"\\","2908":"t","2526":"e","1174":"z","2432":"\"","1287":"a","2424":"N","2758":"\\","1777":"a","3098":"\\","2548":"i","2131":"\\","2507":"n","425":"S","2016":"l","731":"5","231":"e","3247":"s","1949":"/","1118":"f","763":"k","3088":"o","2737":":","354":"\\","830":"l","2141":",","2267":"\\","2084":"/","2096":"o","11":"M","1863":"p","editToggleRgba":"rgba(0,0,0,0)","492":"o","773":"l","3059":"\\","854":"i","184":"k","2187":"\"","1111":"\\","3172":"\\","2041":"c","2386":":","839":"{","2686":"l","155":"g","480":",","2551":"C","2374":"r","3044":"\"","1028":"\\","1936":"a","450":"e","75":"2","445":"l","786":"a","2689":"\"","2966":"1","282":"e","547":"a","823":"I","1850":"\\","105":"h","2946":"w","2558":":","2120":"\"","1698":"c","1241":"o","834":"\"","921":"e","2586":"e","580":"b","1620":"[","365":"a","777":"\\","2278":"\"","2534":"l","144":"b","631":"n","3163":"\"","2854":"o","2347":",","498":"\"","2771":"t","1859":"\"","1345":"e","2633":"r","2625":",","1691":":","1824":"m","1252":"f","wallpaper":"\"#384327\"","719":"\"","1447":"\"","654":"X","1926":"s","1595":"i","932":",","3096":"\\","1327":"e","1338":"\"","2911":"n","557":"d","1149":"\"","2447":"\"","1848":"\"","313":"c","1569":"9","2762":"\"","1711":"\\","1096":"\"","683":"\"","2110":"U","699":"0","757":"\\","2283":"b","845":"\"","2903":"\\","cursors":"{}","1448":":","2886":"\\","2493":"\"","1639":"b","2489":"\\","2698":"\"","2240":"\"","293":"f","1523":"u","1155":"4","1539":"d","1140":"i","1841":"\"","2579":"1","3126":"e","1485":"X","501":"0","690":"B","2601":"u","799":",","2328":"c","1035":"r","2594":"t","462":"e","1585":":","442":"n","2023":"t","1630":"\"","2899":":","2480":"c","2249":":","623":"t","298":"o","2843":"\"","1536":"s","1721":"w","1086":"\\","2570":"S","3125":"n","2230":"\"","3032":"-","2321":"\\","2340":"a","1450":"\"","274":"\"","3188":"\\","2861":"\"","2028":"/","1216":"i","808":"n","467":"e","2264":"5","80":"\\","1043":":","2902":",","566":"\\","976":"a","1382":"s","615":":","1728":"t","101":"h","1495":"\\","2100":"l","1263":"k","1546":"\\","2318":",","1378":":","706":"h","1459":"t","900":"\"","1640":"e","803":"e","814":"}","163":"r","2239":"\\","3141":"n","1973":"\"","2710":"c","1739":"\\","2655":"\"","945":"1","2646":"7","2109":"-","512":"e","117":"i","1268":"\\","1491":"0","2311":"2","764":"B","1741":"l","1907":"a","203":"\\","1919":":","2228":":","2932":"a","575":"\\","3148":"D","1577":"z","2465":"l","1730":"h","2613":"l","2291":"n","1198":"l","1810":"/","2536":"\\","1748":":","1908":"r","1912":"\\","393":":","389":"l","2339":"h","1016":"A","2221":"\"","1136":"s","961":"\\","1120":"n","2379":"a","487":"e","2298":"\"","2806":"\\","3161":":","1060":"d","1479":"s","1076":"o","755":"1","3212":":","3061":"3","2680":"a","380":"s","602":"i","1401":":","2865":"r","1962":"\\","2878":"2","1129":"\\","384":"i","2510":"a","2949":"l","2168":"i","2505":"i","2412":"r","2581":"\\","3007":"D","1808":"s","1069":"0","1470":"l","2275":"g","1236":"n","404":"n","2923":"o","1408":"\\","957":"\\","2472":"\"","2816":"w","334":"e","2519":"l","2161":":","924":"h","1561":"5","3084":"a","2747":"i","1803":"\"","2605":"\"","1667":"o","1239":"o","862":",","874":"b","1001":"\\","1419":"i","1952":"}","958":"\"","35":"o","2061":"m","53":"e","1302":"n","3108":"e","2666":"\\","2279":":","532":"\"","135":"n","1568":".","471":"c","1878":"l","2696":",","898":"x","224":",","536":"d","2007":"u","3072":"i","1410":"e","1543":"g","1959":"b","1108":"\\","2068":"\"","2395":"b","1309":"o","1317":"l","1987":"\"","2270":"e","991":"2","1511":"\"","526":"8","2927":"n","1873":".","2018":"\"","891":":","1768":"s","2338":"p","342":"z","1677":"\\","1221":"l","2781":"\"","703":"\\","1031":"o","1429":"s","1786":"g","3256":"\"","941":"\"","1101":"o","2051":"l","64":"\\","3204":"h","345":"\"","797":"e","6":"a","3115":":","3127":"r","998":",","1518":"d","2367":"\\","2750":"d","408":"l","465":"b","3224":"p","2540":"a","2706":"t","2139":"}","3236":"f","3006":"p","1228":"l","398":"e","723":"a","2788":"\\","1794":"\\","1038":"d","1":"\"","1420":"d","677":"\"","2194":"e","948":"\"","2217":"7","517":"S","2058":":","2671":"1","2527":"c","266":"g","1173":"i","2435":",","1284":"l","2427":"e","2759":"\"","1770":"\"","2549":"n","1337":"\\","1792":"\"","1397":"i","424":"k","728":",","3246":"r","1843":"r","1948":"m","1119":"o","1943":"l","3087":"i","2734":"r","831":"I","843":"d","2142":"\\","2260":"\\","769":"\"","2154":"v","1503":"Y","2085":"d","2097":"z","1862":"t","882":"s","2982":"p","599":"\\","1020":"a","185":"g","217":"\"","2184":"-","1112":"\"","458":"e","355":"\"","2387":"\\","2681":"d","3174":"y","758":"\"","2823":"0","2098":"i","481":"\\","1700":"\\","2550":"k","434":"1","1249":"c","363":"I","3053":"r","3045":"c","2071":"l","1430":"e","929":"3","97":"\"","592":":","190":"d","588":"e","2089":"l","451":"\\","76":"4","444":"b","1336":":","2965":"3","283":"\\","546":"f","2779":":","1851":"\"","2656":"h","1725":"t","3254":"{","1699":"h","1240":"l","433":"\"","1139":"t","920":"h","581":"l","1621":"{","822":"k","776":",","1894":"e","2535":"d","143":"\"","632":"\\","3146":"n","3160":"\"","2853":"d","349":"1","2272":"t","499":"#","2543":"e","1528":"\\","1342":"\\","2634":"C","3159":"\\","2626":"\\","1185":",","1684":"l","716":"\"","1838":"\"","1440":"r","655":"\\","2334":"n","1594":"t","3128":"T","3095":"\"","779":"c","1326":"d","2912":"s","556":"a"} \ No newline at end of file
diff --git a/themes/modern_peach.txt b/themes/modern_peach.txt
new file mode 100644
index 0000000..ca5f4a0
--- /dev/null
+++ b/themes/modern_peach.txt
@@ -0,0 +1 @@
+{"1148":"\\","2446":"\\","1849":",","312":"e","2353":"d","1710":":","1095":"\\","682":"\\","2117":"e","698":"\"","324":"\"","1831":"\"","1100":"f","1449":"\\","2887":"\"","2492":"\\","1638":"u","373":"a","2618":"\"","173":",","290":",","1520":"w","1156":"1","1147":"r","241":":","2578":"\"","307":"\"","689":"w","1484":"w","502":"b","697":"\\","1559":",","709":"o","2329":"k","1040":"h","2595":"e","1055":"d","3180":"1","1584":"\"","2020":"\\","2499":"\\","2487":"z","761":"o","88":":","622":"\"","299":"d","1529":"\"","1333":"r","1537":"h","1720":"/","1085":"r","2573":"e","2565":"\"","3124":"i","1192":"i","2308":"5","3035":"\"","3027":"a","2208":"\"","1451":"\\","642":"r","2588":"a","476":"t","1217":"o","1332":"o","2034":"g","768":"\\","81":"\"","3153":":","2231":"2","977":"\\","2849":"\"","2452":"\"","1820":"l","2320":")","1494":",","2101":"a","1502":"w","1260":"l","1541":"w","1276":"\"","2319":"0","1754":",","705":"s","903":"\"","915":"\\","1647":"r","802":"s","815":",","162":"\"","activeTabId":"\"containerTab\"","3140":"i","1972":"\\","2713":":","1137":"e","33":"\"","1363":",","2654":"\\","2647":"7","513":"a","116":"w","1269":"\"","2316":"5","1740":"\"","3191":"i","204":"\"","2229":"\\","2933":"l","572":"s","2462":"n","1733":"v","2648":"6","2290":"u","1571":")","1813":"w","350":"6","1909":"\\","1913":"\"","1657":"p","1200":"c","392":"\"","388":"o","1011":"r","960":"{","1121":"t","2070":"r","1927":":","43":"-","325":":","2941":"}","2957":"\"","3135":"\"","2807":"\"","2815":"o","2306":"(","1061":"i","1478":"\"","1077":"r","927":"\"","214":"t","3211":"\"","992":"5","399":",","387":"B","605":"d","1400":"\"","617":"\"","1961":"l","2877":",","2511":"l","2948":"l","2169":"d","3104":"c","2415":"\\","2407":"\"","1637":"t","1473":"t","1464":"n","1231":",","2014":"u","1009":"k","1785":"\"","304":"\\","950":"e","2968":"\"","2473":"\\","335":"c","2162":"3","2174":"\"","99":"\\","1560":"2","1297":"e","2740":"l","1802":"\\","2604":"\\","1666":"y","1238":"C","865":"n","1000":")","1418":"v","1951":"\"","959":":","2478":"s","2060":"\"","2724":"a","52":"m","1301":"e","983":"g","89":"\\","1163":"\\","2531":"n","883":"\\","2749":"i","899":"\\","1760":":","225":"\\","2793":"s","2004":"i","3073":"n","1958":"a","1612":"l","1608":":","2396":"o","59":"c","1308":"l","200":"0","1984":"k","1983":"n","990":",","527":"0","1346":"a","3011":"\"","1454":"\\","1872":"e","2199":"\"","1769":"\\","1676":"m","1220":"o","413":":","2164":",","2780":"\\","2202":"t","1428":"l","245":"\\","1102":"n","2050":"\"","65":"\"","796":"s","2679":"e","5":"t","2976":"a","122":"\"","1993":"l","2832":"d","2366":"0","2751":"e","1778":"b","2614":"o","235":"d","2138":"\"","3237":"a","720":"r","736":",","664":"\\","1427":"a","676":"\\","1940":"o","2670":"\"","2524":"\"","1172":"S","491":"l","613":"\\","1285":"e","16":"l","1771":":","2137":"\\","3238":"l","3024":"o","423":"n","729":"2","3245":"u","679":"\\","2048":"{","3086":"d","2735":"\\","832":"d","2143":"\"","152":"n","2155":"a","2725":"b","1500":"d","2086":"e","2090":"o","2429":"\"","1708":"\\","1352":"z","2983":"a","2869":"(","856":"e","1023":":","1438":"d","186":"r","2185":"2","198":":","1113":"\\","459":",","781":"o","2258":"t","2523":"\\","2822":"\"","2099":"l","482":"\"","1701":"\"","2553":"l","2988":":","2127":"a","1248":"#","3054":"-","1556":"2","3046":"o","1431":",","928":":","593":"f","191":"A","1938":".","589":"r","456":"l","1517":"a","77":"7","447":"D","1335":"\"","2964":"f","280":"a","3168":"x","549":"s","2778":"\"","1856":"\"","1629":"\\","1243":"\\","432":"\\","1255":"\\","264":"\\","935":"w","1626":"b","2610":"l","940":"\\","771":"f","1893":"b","142":"\\","633":"\"","289":"\"","2852":"a","2345":"0","2773":"l","1601":":","2765":",","1343":"\"","2627":"\"","1182":"6","439":"\\","2331":"r","717":":","1839":":","1441":"C","652":"o","3094":":","778":"\"","1325":"a","2693":"l","2913":"\\","149":"r","551":",","2859":"a","2441":"t","1846":"e","2352":"r","1713":"h","1348":"e","1094":"y","681":",","2116":"=","1551":"r","1829":"{","1048":"\"","1832":"l","2888":",","2491":":","2892":"I","372":"f","2242":"e","172":"0","291":"\\","1521":"B","1157":"f","1146":"o","23":"[","1373":"o","306":"\\","688":"o","1487":"\"","503":"f","696":":","1558":"5","2326":"b","1041":"\\","305":"\"","2596":"\\","1054":"r","2580":"6","3181":"7","1583":"\\","2021":"\"","2498":",","2486":"i","760":"l","1882":"o","179":"\\","561":"t","2841":":","2029":"/","1534":"\\","1084":"o","106":"t","2564":"\\","926":"\\","1193":"o","1549":"\\","3034":"\\","3026":"t","1385":"\\","1452":"\"","643":"\\","2589":"b","477":"r","1210":"\\","2037":"h","82":",","3152":"\"","3071":"a","2232":"2","970":"u","2848":"\\","2453":",","401":"\"","1497":"s","2102":".","1261":"i","1540":"o","1277":",","1755":"\\","3029":"n","902":"\\","2545":"\\","914":"x","1692":"\\","1646":"u","805":"t","816":"\\","161":"\\","1971":",","2712":"\"","2704":"r","32":"\\","1360":"6","2282":"\"","2640":"\"","2977":"t","1579":"n","2317":"5","2305":"a","3192":"d","1901":"c","1208":"e","1019":"h","2934":"I","968":"r","2078":"t","1732":"t","2289":"o","2649":"7","1570":"0","1812":"w","3219":"\"","1914":"u","1656":"t","1201":"\\","391":"\\","1010":"g","578":"n","1138":"c","1122":"C","2468":"\\","42":"r","2940":"7","2956":":","2804":"\"","2812":"h","2307":"2","1066":":","1074":"\"","215":"h","3210":"\\","237":"u","740":")","386":"n","2924":"c","374":"l","604":"i","1407":",","616":"\\","1960":"e","2876":"5","2403":"l","2516":":","3105":"t","2414":"y","2406":"\\","1472":"f","1465":"\\","1230":"e","2015":"r","402":"l","1008":"c","1784":"\\","951":"t","2470":":","3117":"\\","332":"\"","1082":"o","2669":"\\","2163":"}","535":"a","132":"t","2175":"c","1563":",","1294":"a","2741":"s","2376":"e","852":"t","1665":".","864":"\"","876":"o","1003":",","1417":"i","1950":"\\","2479":"e","2063":"n","2727":"e","51":"a","1300":"\"","982":"r","821":"c","1162":",","3019":"\"","880":"r","2375":"d","87":"\"","896":"9","1761":"{","226":"\"","2792":"\"","2005":"t","3074":"e","2584":"\\","879":"a","1613":"i","1609":"{","2397":"r","58":"\"","3112":"I","989":"5","2777":"\\","1513":"\\","1169":"i","3010":"a","1875":"o","748":"n","2993":"s","1675":"o","1223":"\\","2799":"X","412":"\"","1793":",","256":"C","244":"0","1103":"t","2053":"b","1606":"\\","66":",","791":"\"","2678":"h","4":"n","2975":"e","123":":","1990":"{","2833":"o","2365":"\"","2752":"r","1779":"e","2615":"c","2542":"s","2998":"z","3230":"d","721":"g","737":"0","667":"h","1426":"f","2216":"6","671":"w","543":"\\","2525":"s","1508":"\"","1171":"n","2437":"\"","17":"u","1865":":","2603":",","1772":"[","2136":"2","3239":"s","422":"i","2017":"\\","3022":"\"","3244":"c","678":"0","1631":":","2380":"d","353":",","789":"c","833":"\\","2144":"c","2262":":","153":"d","2156":"l","2300":"\\","1501":"o","2087":"v","2091":"p","2428":"\\","673":"\\","1709":"\"","1353":"e","2980":"l","288":"\\","429":"\\","851":"n","1022":"\"","1439":"e","187":"o","2182":"e","1930":"c","1114":"\"","2042":"o","358":"c","780":"l","2683":"r","2259":"h","541":"l","2821":"\\","483":"h","1702":",","2552":"o","2989":"\"","2126":"l","3055":"3","3047":"n","2394":"\"","1432":"\\","188":"u","590":"\\","192":"l","1939":"g","586":"i","457":"s","78":"p","446":"e","119":"t","2532":"B","2252":",","2506":"o","281":"m","3169":"\\","548":"l","1857":":","3118":"\"","1242":"r","431":":","1254":"c","263":":","922":"i","1593":"c","934":"\"","1627":"e","368":"c","1892":"a","141":"{","559":"r","2851":"h","2344":"1","2772":"A","315":"i","2764":"\"","1340":"\"","2636":"l","2620":"f","1183":"\\","438":",","1821":".","2337":"l","714":"a","1442":"o","653":"w","1921":"\"","2880":"5","1324":"e","2692":"a","2914":"\"","148":"g","550":"e","2858":"b","2440":"n","1847":"\\","2351":"o","1712":"\"","1349":"r","680":"\"","2115":"l","1550":"\"","1828":",","1049":",","34":"c","1833":"a","3173":"\"","2889":"\\","2490":"\"","2893":"n","371":":","2243":"i","171":",","296":"t","569":"f","1145":"l","22":"\"","1370":"e","2587":"n","1486":"\\","504":"b","695":"\"","2327":"a","2277":"\\","1046":"0","2597":"\"","1057":"r","272":",","3182":"0","3175":"\\","1582":"x","234":"a","1218":"n","90":"\"","2485":"S","1881":"c","2904":"\"","624":"e","178":",","872":"\\","560":"I","2840":"\"","1535":"\"","147":"k","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"clock\",\"x\":\"248px\",\"y\":\"147px\",\"height\":180,\"width\":321,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"#a51d2d\",\"headerSize\":\"80\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":1,\"clockBold\":true},\"sections\":{},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"date\",\"x\":\"248px\",\"y\":\"214px\",\"height\":162,\"width\":182,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":true,\"enableClock\":false,\"headerColor\":\"#e66100\",\"headerSize\":\"18\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":2,\"clockBold\":false,\"dateItalic\":false},\"sections\":{},\"clockIntervalId\":3},{\"id\":\"container-3\",\"name\":\"bookmarks\",\"x\":\"245px\",\"y\":\"241px\",\"height\":443,\"width\":82,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"#51921c\",\"sectionSize\":\"0\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#a51d2d\",\"linkSize\":\"16\",\"linkDecor\":false,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"left\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://www.youtube.com\"},{\"label\":\"twitch\",\"url\":\"https://www.twitch.tv\"}],\"label\":\"1\"},\"1\":{\"links\":[{\"label\":\"gmail\",\"url\":\"https://www.gmail.com\"},{\"label\":\"drive\",\"url\":\"https://drive.google.com\"},{\"label\":\"calendar\",\"url\":\"https://calendar.google.com\"}],\"label\":\"2\"},\"2\":{\"links\":[{\"label\":\"github\",\"url\":\"https://www.github.com\"},{\"label\":\"mdn\",\"url\":\"https://developer.mozilla.org/en-US/?hl=en\"}],\"label\":\"3\"}},\"clockIntervalId\":4}]","1722":"w","1379":"f","107":"\\","2567":"i","1190":"c","1548":":","3037":"\\","3021":"\\","1384":",","1453":",","2196":"\"","640":"t","824":"n","474":"\"","1211":"\"","2036":"t","83":"\\","2711":"\\","169":",","2233":"9","3147":"u","971":"n","2450":"\"","1368":"a","362":"n","1496":"\"","2103":"o","514":"d","111":"5","1266":"z","2867":"b","1274":"6","1756":"\"","1747":"\"","1391":"e","905":"\\","308":",","917":",","1645":"\"","804":"c","3121":"n","208":"d","817":"\"","3158":"x","160":":","1970":"}","2715":"a","2707":"a","31":":","1361":"\\","2281":"\\","2297":"\\","1578":"I","2314":",","3193":"t","1902":"a","206":"o","1209":",","1492":"\\","1018":"p","2935":"d","1030":"b","570":"a","1130":"\"","2049":"\\","2460":"i","2079":"t","322":"r","2288":"r","3132":"\"","1164":"\"","1573":"\"","1715":"t","1815":".","3218":",","1717":"s","1915":"r","753":"\"","1655":"t","1202":"\"","390":"d","131":"e","2215":"2","2214":"\"","1013":"u","1968":"\\","579":"a","1123":"o","2469":"\"","41":"e","2947":"a","2955":"\"","2805":"0","2813":"a","2304":"b","3009":"t","1067":"\\","1075":"b","3206":"i","216":"\\","3217":"\"","741":"\\","385":"o","607":"r","1406":"e","611":"o","1967":"1","2875":"5","2517":"f","3102":"\"","2417":",","2818":"\\","3000":"n","1805":"t","770":":","125":"6","1475":"\"","1576":"\"","1466":"\"","1233":"\"","403":"i","1783":":","2559":"\\","952":"t","2471":"\\","3176":"\"","908":"\\","333":"s","2668":":","534":"e","2509":"t","2176":"o","1562":"5","2426":"m","1295":"l","888":"x","2742":"e","962":"\"","1664":"w","2922":"l","867":"m","871":":","1002":"\"","488":"r","1416":"D","2062":"d","2726":"l","754":":","2663":"i","981":"\"","138":"\\","997":"5","520":"e","3018":"\\","1723":"w","881":"k","3203":"\"","897":"p","1762":"\\","949":"s","227":"b","2791":"\\","2002":"\"","3075":"r","2787":"r","2205":"\"","878":"m","1610":"\\","2390":"\\","343":"e","2274":"n","3113":"d","988":"5","2541":"l","1998":"\\","1512":",","1168":"t","1649":"\\","3013":"\"","1874":"g","2990":"f","1674":"c","1222":"d","2798":"w","411":"\\","1032":"r","255":"r","2192":"a","243":"\"","1619":":","2052":"a","1607":"\"","67":"\\","790":"\\","3":"o","2974":"p","120":"h","1179":"\\","1991":"\\","2830":"h","1282":"a","2364":"\\","2753":"C","2616":"k","3227":"y","2999":"I","3231":"i","726":"5","734":"5","1799":"\\","666":"s","1425":":","1946":"c","1314":":","2388":"\"","2732":"d","68":"\"","2522":",","1509":"0","1170":"o","2436":"\\","14":"V","2420":"f","1864":"s","2488":"e","1773":"{","3122":"t","2135":"\"","421":"l","859":"3","3243":"\"","2381":"i","3028":"i","788":"i","2145":"l","2263":"1","150":"o","2157":"I","2829":"s","2088":"e","2092":"e","1350":"S","2981":"l","3205":"e","428":"e","850":"o","1025":"0","2032":"w","180":"\"","2183":"r","598":",","1931":"a","1115":",","70":"\\","359":"t","783":"k","2682":"e","2963":"1","3001":"d","2158":"d","540":"o","2820":":","2918":",","484":"e","2227":"\"","1703":"\\","2555":"r","2125":"\"","3056":"\\","3040":"\\","2842":"\\","1433":"\"","189":"n","591":"\"","193":"p","587":"d","454":"f","79":"x","441":"e","2533":"o","2253":"\\","3166":"0","1396":"l","1854":"l","2628":"h","1245":":","430":"\"","1257":",","1929":"/","262":"\"","1592":"e","937":"d","1624":"l","369":"\\","1891":"l","140":":","2433":"\\","558":"e","2850":"s","2448":":","494":"\\","2775":"g","2359":"t","2767":"\"","1341":",","2637":"o","2621":"a","1695":"w","3068":"o","1687":"e","840":"\\","715":"\\","2119":"\\","1443":"l","650":"a","1922":"h","2881":",","1599":"\\","379":"\"","1323":"h","2695":"e","2915":":","1526":"\"","553":"\"","3149":"a","2443":"o","1844":"i","1510":"\\","2350":"b","301":"\\","2114":"h","1553":"b","1834":"b","751":"x","2026":"s","1635":"o","98":",","370":"\"","1889":"\\","170":"0","297":"C","568":":","1144":"o","21":":","1371":"r","1489":"\\","505":"c","694":"\\","2919":"\\","2324":"\\","341":"i","1047":"\\","2598":":","1056":"e","648":"s","271":"\"","2582":"\"","1581":"e","2271":"t","1219":"B","91":"1","762":"c","1880":".","2905":"s","627":"A","563":"l","979":":","2458":"c","925":"t","28":"d","2574":"\\","104":"g","2566":"l","1191":"t","3036":",","3080":"}","3020":":","1387":"h","1399":"\\","641":"e","475":":","1212":"s","250":"b","463":"n","3150":"t","2234":"p","316":"o","1978":"{","972":"d","2451":"\\","39":"i","212":"i","1369":"d","1089":"\\","2104":"r","515":"e","110":"1","1267":"e","1542":"R","1275":"\\","1757":"1","1746":"\\","1390":"d","904":"y","916":"\"","240":"\"","1411":"n","1644":"\\","807":"o","468":"C","810":"\\","2714":"f","1985":"s","30":"\"","2659":"d","2280":"{","2642":"\\","2315":"2","1758":"\\","3194":"h","207":"r","919":"\"","2224":"\"","2936":"\\","571":"l","1131":"\\","2461":"o","49":"\"","2709":"i","323":"\\","3133":"\"","2349":"\"","2890":"\"","1572":"\\","464":"a","1814":"w","2673":"\\","1916":"l","1654":"h","1203":":","3064":":","1012":"o","2222":",","619":"\"","963":"b","2073":"\"","40":"n","328":"\\","2954":"r","2847":",","2810":"\"","3008":"a","1064":"\\","1021":"\\","1072":",","3207":"g","3216":"}","1738":",","2012":"\\","746":"z","2571":"i","2926":"I","606":"e","1405":"s","55":"\"","1966":"\"","1685":"a","2874":"2","1947":"o","2514":"\\","847":"\\","2501":"s","3103":"a","2416":"\"","2819":"\"","2400":"r","3003":"x","1804":"h","1474":"\\","2602":"e","218":":","2434":"\"","1232":"\\","400":"\\","2835":"B","1782":"\"","1957":"l","953":"i","2476":"\\","1307":"C","330":",","1372":"B","537":"e","2508":"I","130":"s","2177":"n","1292":":","889":"\\","489":"C","2743":",","2609":"b","1398":"c","670":"o","866":"a","870":"\"","1005":"\"","1789":"i","1415":"e","3062":"\\","2690":":","2398":"d","2721":"\"","1751":"\\","2662":"S","980":"\\","139":"\"","996":"5","521":"\\","1160":"\\","381":"e","2404":"o","886":"\\","894":"1","1763":"\"","228":"o","2790":",","2003":"g","419":"\\","3076":"-","2786":"e","2204":"\\","3253":"\"","1611":"\"","3063":"\"","2391":"\"","340":"S","798":"}","3110":"a","128":"\\","1999":"\"","1515":"s","2000":":","3012":":","2661":"r","1877":"g","2991":"a","54":"\\","636":"\"","1673":".","1225":":","410":"r","1791":"\\","1321":"\\","254":"e","2211":"\"","2193":"m","242":"\\","2055":"l","1604":"\"","60":"l","793":"f","2":"c","121":"\\","1988":":","1178":":","1996":"e","2831":"a","1283":"b","2363":":","2754":"o","7":"i","2130":"l","2617":"\\","519":"z","3232":"o","727":"5","735":"5","1798":"l","669":"d","1424":"\"","2198":"\\","249":"\"","2838":"r","2389":"0","2733":"e","69":"x","167":"(","2675":",","158":"\\","573":"e","1506":":","2080":"p","2439":"o","2423":"t","1867":"/","1358":"\"","2134":"\\","1262":"n","1979":"\\","420":"\"","858":"-","3242":",","2045":"\"","3083":"\"","351":"\\","2146":"o","516":"r","151":"u","2150":"n","2828":"\"","2165":"{","2093":"r","1351":"i","2986":"r","704":"\"","564":"i","3048":"t","1024":"1","181":"b","2180":"i","3249":"r","1932":"l","2040":".","1116":"\\","71":"\"","449":"t","782":"c","3178":"\\","2962":"4","286":"\\","2159":"\\","2827":"\\","485":"a","1704":"\"","2554":"o","2124":"\\","61":"o","1615":"k","3057":"\"","3041":"\"","1690":"\"","1434":"d","596":"s","194":"h","584":"i","455":"a","361":"o","1899":"\\","1775":"\"","2530":"o","3171":",","635":"\\","3167":"p","1636":"u","1099":"\"","1855":"\\","1735":"\"","2572":"z","2629":"e","1188":"s","1244":"\"","437":"\"","1256":"\"","848":"\"","1680":",","658":"\\","261":"\\","1591":"s","936":"i","3092":"k","1625":"a","826":"e","772":"a","1296":"s","1158":"3","2748":"v","2342":"\"","495":"\"","317":"n","2358":"d","2766":"\\","309":"\\","1092":"r","687":"d","2622":"l","1181":"1","1823":"o","841":"\"","2335":"d","651":"d","1923":"t","2882":".","1598":"s","2497":"\"","2894":"d","378":"\\","1322":"\"","2694":"s","1468":"\\","2916":"{","1527":":","552":"\\","1151":"\\","2442":"C","1845":"v","2357":"i","300":"e","1481":"a","1552":"g","1835":"e","279":"N","1589":"\\","2027":":","1634":"y","1888":"{","2401":"C","1033":"d","177":"\"","294":"o","1532":"\"","3241":"\"","20":"\"","1376":"\\","3129":"a","1488":":","506":"\\","1199":"i","943":"2","2325":"\"","1044":"\\","2599":"t","1051":"\"","649":"h","2583":",","360":"i","1580":"d","92":"1","2031":"w","1887":",","84":"\"","2906":"e","626":"t","562":"a","2846":"\"","2459":"t","2336":"A","634":":","1724":".","1081":"C","2577":"\\","1499":"a","2561":"\\","118":"d","1196":"t","3039":"2","3023":"c","702":",","1386":"\"","1455":"\"","646":"\\","1213":"e","460":"\\","818":"c","3157":"\"","2235":"x","3145":"e","1977":":","973":"R","2456":"s","38":"a","1366":"h","2651":"\\","1088":":","1490":"\"","2105":"g","113":",","1264":"S","2250":"4","1272":"\"","1750":"\"","1389":"a","1745":"l","1393":"I","907":":","911":"6","2266":",","806":"i","469":"l","811":"\"","1795":"\"","2717":"s","2701":"a","2658":"a","2287":"g","2643":"\"","2295":"b","877":"k","1759":"\"","3195":"\\","918":"\\","397":"s","1334":"\\","2225":"y","2937":"\"","1132":"\"","1124":"d","48":"\\","2708":"l","3130":"b","2802":":","3101":",","1575":"\\","1817":"m","775":"e","2072":"\\","1917":"\\","1653":"\"","1204":"f","3065":"\\","3187":",","618":"\\","964":"a","620":",","2074":":","47":",","2945":"\"","repeatWallpaper":"false","2953":"e","1693":"\"","2811":"s","2408":":","1065":"\"","3225":"l","1467":":","1073":"\\","210":"r","3215":"9","528":"\\","747":"I","756":",","1404":"l","2862":":","1965":"\\","2873":",","978":"\"","338":"o","2515":"\"","2500":"\"","1565":"5","3002":"e","1807":"p","1477":"\\","1078":"d","1460":"A","1663":"w","1161":"\"","2268":"\"","2247":"\\","2592":"D","2302":"r","1781":"\\","1956":"\"","2477":"\"","2065":"\"","2729":"i","57":"\\","1306":"e","331":"\\","2166":"\\","3109":"T","2170":"\\","1293":"f","2373":"o","2608":"a","220":"\"","3183":"p","219":"\\","869":"\\","873":"\"","1004":"\\","1788":"a","2504":"t","2399":"e","2720":"\\","348":"\"","1313":"\"","987":"2","539":"B","230":"d","995":"2","522":"\"","1167":"c","887":"\"","895":"5","1764":"l","229":"r","3154":"\"","2797":"o","418":",","3077":"2","2785":"t","2207":"\\","2219":"x","3252":":","1105":"a","2392":",","1421":"e","2688":"\\","3111":"b","1980":"\"","2839":"\\","3015":"\\","1876":"o","3220":"a","238":"s","1672":"e","2195":"\\","1224":"\"","417":"\"","1790":"l","661":"\\","2210":"\\","2190":"\"","944":"9","2054":"e","2925":"k","1605":"0","792":":","1890":"\"","2972":"r","1989":"[","1997":"l","1280":"e","2362":"\"","2755":"l","1774":"\\","759":"c","3229":"u","3233":"\"","1826":"\"","724":"(","732":",","668":"a","672":"Y","1944":"e","248":"\\","2730":"v","835":":","2674":"\"","2520":"s","1507":"\\","2081":"s","2438":"f","1015":"d","2657":"e","12":"a","1866":"/","1359":"1","2463":"C","2544":",","2776":"n","2484":"n","2188":",","2044":"\\","2383":"s","2685":"o","2147":"c","156":"b","2151":"t","246":"\"","2449":"\\","1869":"r","1356":":","2987":"\"","3049":"a","1027":",","182":"a","2181":"n","1933":"e","1117":"\"","1109":"\"","72":":","448":"a","785":"t","2538":":","2961":"2","287":"\"","542":"d","2826":",","486":"d","1705":"u","2557":"\"","2123":",","625":"x","3042":":","2296":"a","1435":"i","269":"y","597":"e","195":"a","585":"v","1696":"i","366":"l","443":"a","1339":"\\","2255":"w","3228":"A","2857":"g","2630":"a","1093":"e","1189":"e","1247":"\"","436":"\\","1251":"b","849":"c","1444":"o","659":"\"","260":"r","1590":"\"","931":"9","2203":"e","3091":"n","827":"r","1159":"1","2341":"\\","496":":","2860":"\\","954":"n","2761":"\\","1091":"g","686":"a","2113":"?","2623":"s","1697":"t","1681":"{","846":":","713":"b","133":"t","2883":"9","2496":"\\","2895":"e","377":",","1920":"\\","2697":"\\","2245":"h","2917":"}","1524":"r","3093":"\"","1152":"\"","1143":"C","2348":"\\","1842":"d","319":"o","2356":"W","303":":","1480":"h","693":"r","1555":"(","2591":"e","1059":"a","278":"t","3184":"x","1588":",","2024":"t","3119":"c","1633":"\"","2039":"b","2483":"o","176":"\\","765":"o","295":"n","1618":"\"","1533":",","27":"i","1377":"\"","2569":"k","507":"\"","3031":"r","2909":"i","2322":"\"","1045":"\"","1050":"\\","277":"n","2612":"C","472":"k","93":"2","2030":"w","1886":"}","85":"y","3170":"\"","2907":"c","629":"i","3116":"\"","565":"c","2845":"\\","749":"d","1727":"i","1080":"r","102":"e","1498":"h","2560":"\"","3123":"a","1197":"a","1545":"a","3038":"\"","701":"\"","1381":"l","1456":"t","647":"\"","1643":",","461":"\"","819":"l","3156":"\\","2236":"\\","2641":":","352":"\"","3144":"M","1976":"\"","2457":"e","37":"t","1367":"e","2650":"b","2251":"6","1493":"\"","2106":"/","825":"t","112":"9","1265":"i","1273":"1","2312":"5","1414":"l","1388":"e","1744":"e","1392":"r","1904":"e","906":"\"","910":"2","199":"1","812":":","1318":"s","576":"\"","2276":"s","2466":"o","2382":"u","2547":"l","1737":"]","2286":"k","3138":"t","2294":"g","614":"\"","1278":"\\","3196":"\"","396":"l","3085":"u","2226":"\\","2938":":","1133":",","1125":"e","2197":":","321":"o","3131":"\\","2803":"\\","1574":",","320":"l","1816":"g","3200":"3","1652":"\\","1205":"a","3066":"\"","383":"t","1316":"a","601":"d","965":"c","2075":"\\","46":"\"","2944":",","2952":"p","2808":",","2411":"g","3120":"o","209":"e","2303":"g","2607":"n","1070":"\\","211":"W","3214":"2","1235":"i","1659":":","2010":"\"","409":"o","744":"\\","2920":"\"","612":"r","1964":":","2872":"5","339":"n","2503":"c","2959":"\"","2178":"t","1564":"2","2744":"\\","2402":"o","1806":"t","1476":",","2600":"r","1461":"l","1662":"w","861":"\"","2019":":","1780":"l","1714":"t","1955":"\\","2474":"\"","2064":"\\","2728":"D","56":":","1305":"l","1079":"e","2665":"e","2167":"\"","531":"\\","136":"g","909":"\"","2171":"\"","999":"0","1290":"\\","2372":"b","2700":"e","221":"0","2008":"b","1669":"t","2863":"\\","868":"e","3189":"\"","1007":"a","1413":"b","1616":"s","2723":"n","1394":"t","1312":"\\","2273":"i","538":"r","994":",","523":":","1166":"e","1688":"l","884":"\"","159":"\"","892":"\\","1765":"i","2996":",","842":"i","2796":"d","2001":"\\","3078":"\\","2784":"n","1034":"e","2206":",","253":"d","2218":"p","3251":"\"","1106":"m","2431":"\\","2393":"\\","346":":","9":"e","126":"3","3134":",","2836":"l","1288":"t","3014":"{","3221":"u","239":"\\","3177":":","1671":"b","1227":"a","416":"\\","1797":"r","660":"0","1423":"\\","2213":"\\","2191":"n","947":"\\","2421":"o","2057":"\"","2738":"f","62":"c","2528":"t","0":"{","2971":"\"","1176":"\\","2430":":","96":"\\","1281":"n","2361":"\\","2756":"o","923":"g","2619":":","232":"r","2133":":","427":"z","725":"2","2409":"\\","733":"2","2254":"\"","3255":"}","356":"s","836":"2","2677":"\"","2265":"3","1504":"\\","2082":":","2094":".","13":"p","1861":"t","738":".","2189":"\\","3240":"e","1648":"l","1150":":","2047":",","2384":"\\","3081":"\"","750":"e","2684":"B","2969":"\"","2148":"k","157":"a","2152":"e","1903":"l","18":"e","1868":"d","1357":"\\","2984":"p","3050":"i","1177":"\"","183":"c","1934":"n","452":"\"","314":"t","73":"\\","784":"I","327":"\"","2960":"#","284":"\"","545":":","2825":"\"","1852":"u","857":"r","2638":"r","1706":"r","1362":"\"","2556":"\\","2122":"]","1259":"\"","530":",","3043":"\\","1436":"v","268":"e","594":"a","196":"\\","939":"h","582":"e","3099":"\"","1622":"\\","367":"i","1897":"\"","146":"c","2256":"i","637":"c","3165":"8","794":"a","2856":"R","2769":"e","1347":"d","2631":"d","3052":"e","2129":"e","1186":"\\","1246":"\\","435":"6","1689":"\\","1250":"0","2332":"o","2067":"\\","1445":"r","656":"\"","1924":"t","3248":"o","1597":"n","930":"4","3090":"i","828":"v","1329":"C","2209":"x","638":"e","555":"e","2445":"e","497":"\\","311":"s","2035":"i","2760":":","1090":"\"","685":"h","2112":"/","2261":"\"","1682":"\\","710":"w","2884":"0","2495":"6","2896":"x","610":"l","376":"e","1320":",","2246":"t","1525":"\\","1153":"#","1142":"n","318":"C","1184":"\"","2355":"r","302":"\"","3179":"\"","1483":"o","692":"u","1554":"a","1830":"\\","1837":"\\","1058":"R","3185":"\\","1587":"}","2025":"p","1632":"\\","2038":"u","2482":"i","1355":"\"","621":"\\","175":")","1530":"0","26":"\"","1374":"l","2568":"n","508":",","3030":"e","2323":",","1053":"o","276":"o","1969":"\"","473":"\\","1214":"c","94":"p","2033":".","767":"d","86":"\\","2900":"3","628":"l","1858":"\\","974":"g","2844":"0","2118":"n","1726":"w","103":"i","743":",","2563":",","1194":"n","1544":"b","2422":"n","1180":"\"","700":"\\","1380":"a","1457":"e","644":"\"","2973":"e","478":"u","801":"\"","3155":"{","165":"b","2237":"\"","3143":"s","1975":"\\","2454":"\\","1767":"k","36":"n","1364":"\\","2653":",","108":"\"","2644":"#","2107":"e","510":"\"","115":"\"","1270":":","2313":"5","1752":"\"","712":"g","1743":"b","1395":"a","1905":"n","201":"0","913":"p","813":"{","2930":"r","577":"e","2467":"r","2719":",","2703":"e","1736":"}","853":"a","2285":"c","3139":"t","2293":"R","1279":"\"","3208":"h","3197":":","1910":"\"","395":"a","1898":":","1014":"n","609":"o","2939":"4","1134":"\\","1126":"\\","326":"\\","2590":"l","3136":"s","2800":"\\","3199":"5","2419":"\"","257":"o","1062":"u","1819":"i","3201":",","2716":"l","129":"\"","1651":":","1206":"l","3067":"c","382":"c","600":"\"","1403":"a","966":"k","2076":"\"","45":"\\","2512":"i","3190":"w","2951":"a","2809":"\\","2410":"\"","3005":"a","1071":"\"","1469":"\"","440":"\"","1982":"i","1658":"s","2011":",","406":"C","745":"\"","2921":"c","955":"g","2871":"5","336":"t","2942":"]","1331":"l","2502":"e","2958":"\\","2179":"a","1567":",","1298":",","2745":"\"","2309":"5","1801":":","audioLink":"\"\"","1462":"i","1992":"\"","2244":"g","1315":"f","1661":"/","860":"\\","2046":"}","2891":"z","1954":",","2475":",","zIndexMapData":"{\"1\":\"container-1\",\"2\":\"container-2\",\"3\":\"container-3\"}","405":"k","1304":"b","2672":"6","2664":"z","1822":"c","137":"s","2172":":","1291":"\"","2371":"\"","2223":"\\","2301":"\"","222":"\\","2360":"h","2009":"\\","1668":"u","3070":"t","1883":"m","1006":"b","1412":"a","1617":"\\","2722":"e","1311":"k","985":"a","993":"5","524":"\\","1165":"s","885":",","2378":"R","1871":"v","893":"\"","1766":"n","2997":"\"","1686":"b","1679":"}","2795":"a","3079":"\"","2783":"e","1037":"i","2201":"a","252":"r","742":"\"","3250":"s","1900":"\"","1107":"e","2868":"a","1602":"{","795":"l","8":"n","2979":"a","127":",","2837":"u","1516":"h","1289":"e","2369":",","3017":"1","2611":"e","2546":"\"","3234":":","1670":"u","1226":"f","415":"\"","1928":"/","1796":"u","663":",","259":"o","1422":"r","2212":":","675":":","946":",","1234":"l","3186":"\"","2056":"\\","2739":"a","63":"k","2529":"i","2970":",","1175":"e","1995":"b","273":"\\","1286":"D","2425":"a","2757":"r","1514":"\"","1776":"l","233":"R","2132":"\"","2731":"i","2992":"l","426":"i","730":"5","3151":"a","3089":"L","2736":"\"","357":"e","837":"}","2140":"}","2676":"\\","1505":"\"","2083":"/","2095":"m","10":"r","1860":"h","3058":",","855":"n","739":"9","1600":"\"","2186":"\\","986":"(","1110":":","2660":"e","2385":"\"","838":",","2687":"d","2330":"g","2149":"I","154":"R","2153":"r","19":"s","2928":"t","1945":".","1354":"\\","2985":"e","1895":"l","1937":"r","3051":"n","1029":"\"","1036":"W","1935":"d","3082":",","453":":","74":"\"","787":"l","1330":"o","2967":"\\","285":":","544":"\"","2824":"\\","329":"\"","1853":"r","2639":"\\","1707":"l","2537":"\"","2121":"}","3100":"\"","1258":"\\","166":"a","1827":"}","479":"e","1437":"i","267":"r","595":"l","197":"\"","938":"t","583":"D","1623":"\"","364":"t","1896":"\\","145":"a","2257":"d","630":"g","3162":"\\","168":"0","2855":"w","1981":"l","2768":"t","1344":"h","2632":"e","2624":"e","2128":"b","1187":"\"","1825":"\\","1253":"b","2333":"u","718":"\\","2763":"\\","1446":"\\","657":":","1925":"p","1596":"o","933":"\\","3097":"\"","1628":"l","829":"a","1328":"r","265":"\"","2910":"o","639":"n","554":"h","2444":"d","490":"o","310":"\"","1716":"p","1097":",","684":"s","2043":"m","2111":"S","1683":"\"","15":"a","844":"\\","711":"R","24":"{","2885":")","2494":"1","2897":"\\","375":"s","2699":"h","292":"\"","1522":"l","1154":"2","1538":"a","1141":"o","1840":"\\","2354":"e","1719":"/","493":"r","1482":"d","500":"c","691":"l","1557":"5","1042":"\"","2013":"\"","2593":"a","2585":"\"","1586":"2","1836":"l","1098":"\\","2022":"h","2898":"\"","1734":"\\","2481":"t","2575":"\"","2248":"\"","174":"0","1104":"N","1531":"\\","2814":"d","25":"\\","1087":"\"","3164":"6","2346":"0","509":"\\","3033":"1","3025":"n","708":"d","1052":"b","275":"f","470":"o","1215":"t","809":"s","95":"x","466":"l","766":"l","1884":"\\","2901":"}","1963":"\"","567":"\"","975":"b","2521":"e","1729":"c","100":"\"","518":"i","2562":"\"","1195":"I","1547":"\"","707":"a","1383":"e","1458":"x","901":",","645":",","1641":"\\","800":"\\","270":"\\","164":"g","2238":",","3142":"g","1519":"o","1974":"2","3107":"v","2455":"\"","3114":"\"","236":"i","1365":"\"","2652":"\"","2635":"o","109":":","2645":"7","2108":"n","511":"h","114":"\\","1271":"\\","2310":",","1753":"}","1742":"a","1906":"d","202":",","1918":"\"","912":"3","2931":"v","574":",","942":":","2464":"o","2718":"e","2702":"d","1731":".","2284":"a","2292":"d","1941":"o","1811":"/","3209":"t","1749":"\\","3198":"4","1083":"l","50":"n","1911":",","394":"f","autoplayAudio":"false","1017":"l","2220":"\\","2377":"r","1135":"\"","1127":"\"","2943":"\"","969":"o","3137":"e","2299":":","2801":"\"","2418":"\\","2817":"Y","1063":"s","1818":"a","3202":"\\","3213":"5","820":"o","1650":"\"","1207":"s","3060":"\"","3222":"t","2929":"e","603":"v","1402":"f","2864":"\"","967":"g","2879":"5","1128":":","2077":"h","44":"1","2513":"c","3106":"i","2950":"p","1642":"\"","2413":"e","2405":"r","3004":"M","1809":":","1068":"\"","1471":"e","213":"d","2774":"i","1237":"k","407":"o","3069":"n","205":"b","1787":"m","1409":"\"","956":"s","347":"\\","2870":"2","337":"i","2518":"a","665":"\"","2160":"\"","1566":"5","1299":"\\","2746":"d","1800":"\"","2606":"e","1463":"g","2995":"\"","1660":"/","863":"\\","875":"o","1994":"a","1953":"]","2066":",","2539":"f","774":"s","1303":"a","1319":"e","2667":"\"","533":"h","134":"i","2173":"\\","29":"\\","1718":":","2370":"\\","1879":"e","223":"\"","2006":"h","2705":"I","settingsMenuData":"{\"x\":\"1007px\",\"y\":\"53px\",\"width\":457,\"height\":558}","2770":"x","1694":"t","3258":"\n","1885":"\"","1614":"n","2069":"u","3226":"a","1310":"c","1986":"\\","984":"b","1026":"0","529":"\"","525":"\"","1870":"i","890":"\"","2241":"h","2691":"f","2994":"e","2576":":","1678":"\"","2794":"h","608":"C","2782":"c","2200":"d","251":"o","3257":"}","247":",","2343":":","1603":"\\","344":"\\","2978":"W","124":"3","2866":"g","2269":"s","2834":"w","2368":"\"","3016":"\"","3223":"o","3235":"\"","1229":"s","722":"b","414":"\\","2789":"\"","752":"\\","1039":"t","662":"\"","258":"l","674":"\"","1942":"g","1375":"d","2059":"\\","2908":"t","2526":"e","1174":"z","2432":"\"","1287":"a","2424":"N","2758":"\\","1777":"a","3098":"\\","2548":"i","2131":"\\","2507":"n","425":"S","2016":"l","731":"5","231":"e","3247":"s","1949":"/","1118":"f","763":"k","3088":"o","2737":":","354":"\\","830":"l","2141":",","2267":"\\","2084":"/","2096":"o","11":"M","1863":"p","editToggleRgba":"rgba(0,0,0,0)","492":"o","773":"l","3059":"\\","854":"i","184":"k","2187":"\"","1111":"\\","3172":"\\","2041":"c","2386":":","839":"{","2686":"l","155":"g","480":",","2551":"C","2374":"r","3044":"\"","1028":"\\","1936":"a","450":"e","75":"2","445":"l","786":"a","2689":"\"","2966":"1","282":"e","547":"a","823":"I","1850":"\\","105":"h","2946":"w","2558":":","2120":"\"","1698":"c","1241":"o","834":"\"","921":"e","2586":"e","580":"b","1620":"[","365":"a","777":"\\","2278":"\"","2534":"l","144":"b","631":"n","3163":"\"","2854":"o","2347":",","498":"\"","2771":"t","1859":"\"","1345":"e","2633":"r","2625":",","1691":":","1824":"m","1252":"f","wallpaper":"\"#ffbe6f\"","719":"\"","1447":"\"","654":"X","1926":"s","1595":"i","932":",","3096":"\\","1327":"e","1338":"\"","2911":"n","557":"d","1149":"\"","2447":"\"","1848":"\"","313":"c","1569":"9","2762":"\"","1711":"\\","1096":"\"","683":"\"","2110":"U","699":"0","757":"\\","2283":"b","845":"\"","2903":"\\","cursors":"{}","1448":":","2886":"\\","2493":"\"","1639":"b","2489":"\\","2698":"\"","2240":"\"","293":"f","1523":"u","1155":"4","1539":"d","1140":"i","1841":"\"","2579":"1","3126":"e","1485":"X","501":"0","690":"B","2601":"u","799":",","2328":"c","1035":"r","2594":"t","462":"e","1585":":","442":"n","2023":"t","1630":"\"","2899":":","2480":"c","2249":":","623":"t","298":"o","2843":"\"","1536":"s","1721":"w","1086":"\\","2570":"S","3125":"n","2230":"\"","3032":"-","2321":"\\","2340":"a","1450":"\"","274":"\"","3188":"\\","2861":"\"","2028":"/","1216":"i","808":"n","467":"e","2264":"5","80":"\\","1043":":","2902":",","566":"\\","976":"a","1382":"s","615":":","1728":"t","101":"h","1495":"\\","2100":"l","1263":"k","1546":"\\","2318":",","1378":":","706":"h","1459":"t","900":"\"","1640":"e","803":"e","814":"}","163":"r","2239":"\\","3141":"n","1973":"\"","2710":"c","1739":"\\","2655":"\"","945":"1","2646":"7","2109":"-","512":"e","117":"i","1268":"\\","1491":"0","2311":"2","764":"B","1741":"l","1907":"a","203":"\\","1919":":","2228":":","2932":"a","575":"\\","3148":"D","1577":"z","2465":"l","1730":"h","2613":"l","2291":"n","1198":"l","1810":"/","2536":"\\","1748":":","1908":"r","1912":"\\","393":":","389":"l","2339":"h","1016":"A","2221":"\"","1136":"s","961":"\\","1120":"n","2379":"a","487":"e","2298":"\"","2806":"\\","3161":":","1060":"d","1479":"s","1076":"o","755":"1","3212":":","3061":"3","2680":"a","380":"s","602":"i","1401":":","2865":"r","1962":"\\","2878":"2","1129":"\\","384":"i","2510":"a","2949":"l","2168":"i","2505":"i","2412":"r","2581":"\\","3007":"D","1808":"s","1069":"0","1470":"l","2275":"g","1236":"n","404":"n","2923":"o","1408":"\\","957":"\\","2472":"\"","2816":"w","334":"e","2519":"l","2161":":","924":"h","1561":"5","3084":"a","2747":"i","1803":"\"","2605":"\"","1667":"o","1239":"o","862":",","874":"b","1001":"\\","1419":"i","1952":"}","958":"\"","35":"o","2061":"m","53":"e","1302":"n","3108":"e","2666":"\\","2279":":","532":"\"","135":"n","1568":".","471":"c","1878":"l","2696":",","898":"x","224":",","536":"d","2007":"u","3072":"i","1410":"e","1543":"g","1959":"b","1108":"\\","2068":"\"","2395":"b","1309":"o","1317":"l","1987":"\"","2270":"e","991":"2","1511":"\"","526":"8","2927":"n","1873":".","2018":"\"","891":":","1768":"s","2338":"p","342":"z","1677":"\\","1221":"l","2781":"\"","703":"\\","1031":"o","1429":"s","1786":"g","3256":"\"","941":"\"","1101":"o","2051":"l","64":"\\","3204":"h","345":"\"","797":"e","6":"a","3115":":","3127":"r","998":",","1518":"d","2367":"\\","2750":"d","408":"l","465":"b","3224":"p","2540":"a","2706":"t","2139":"}","3236":"f","3006":"p","1228":"l","398":"e","723":"a","2788":"\\","1794":"\\","1038":"d","1":"\"","1420":"d","677":"\"","2194":"e","948":"\"","2217":"7","517":"S","2058":":","2671":"1","2527":"c","266":"g","1173":"i","2435":",","1284":"l","2427":"e","2759":"\"","1770":"\"","2549":"n","1337":"\\","1792":"\"","1397":"i","424":"k","728":",","3246":"r","1843":"r","1948":"m","1119":"o","1943":"l","3087":"i","2734":"r","831":"I","843":"d","2142":"\\","2260":"\\","769":"\"","2154":"v","1503":"Y","2085":"d","2097":"z","1862":"t","882":"s","2982":"p","599":"\\","1020":"a","185":"g","217":"\"","2184":"-","1112":"\"","458":"e","355":"\"","2387":"\\","2681":"d","3174":"y","758":"\"","2823":"0","2098":"i","481":"\\","1700":"\\","2550":"k","434":"1","1249":"c","363":"I","3053":"r","3045":"c","2071":"l","1430":"e","929":"3","97":"\"","592":":","190":"d","588":"e","2089":"l","451":"\\","76":"4","444":"b","1336":":","2965":"3","283":"\\","546":"f","2779":":","1851":"\"","2656":"h","1725":"t","3254":"{","1699":"h","1240":"l","433":"\"","1139":"t","920":"h","581":"l","1621":"{","822":"k","776":",","1894":"e","2535":"d","143":"\"","632":"\\","3146":"n","3160":"\"","2853":"d","349":"1","2272":"t","499":"#","2543":"e","1528":"\\","1342":"\\","2634":"C","3159":"\\","2626":"\\","1185":",","1684":"l","716":"\"","1838":"\"","1440":"r","655":"\\","2334":"n","1594":"t","3128":"T","3095":"\"","779":"c","1326":"d","2912":"s","556":"a"} \ No newline at end of file
diff --git a/themes/peaceful_horse.txt b/themes/peaceful_horse.txt
deleted file mode 100644
index 6def881..0000000
--- a/themes/peaceful_horse.txt
+++ /dev/null
@@ -1 +0,0 @@
-{"autoplayAudio":"false","containerMapValues":"[{\"id\":\"container-2\",\"name\":\"horse clone\",\"x\":\"259px\",\"y\":\"472px\",\"height\":304,\"width\":450,\"imageUrl\":\"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipart-library.com%2Fimages%2F5TRrgXbpc.gif&f=1&nofb=1&ipt=d33858e361adaf5dda2c98e4dcb165f4ed22a20915c3efe5cd201d7b0a6b3704\",\"containerSettings\":{\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,0.9)\",\"zIndex\":1}}]","wallpaper":"\"https://i.imgur.com/3QYCOxV.jpeg\"","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-2\"}","audioLink":"\"\"","activeTabId":"\"containerTab\"","settingsMenuData":"{\"x\":\"803px\",\"y\":\"115px\",\"width\":644,\"height\":404}","cursors":"{}"}
diff --git a/themes/pillars_dark.txt b/themes/pillars_dark.txt
new file mode 100644
index 0000000..2ee996c
--- /dev/null
+++ b/themes/pillars_dark.txt
@@ -0,0 +1 @@
+{"autoplayAudio":"false","containerMapValues":"[{\"id\":\"container-1\",\"name\":\"left\",\"x\":\"355px\",\"y\":\"206px\",\"height\":475,\"width\":213,\"settings\":{\"backgroundRgba\":\"rgba(99,92,86,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"0\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#f6f5f4\",\"linkSize\":\"16\",\"linkDecor\":false,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"200\",\"shadowRgba\":\"rgba(255,255,255,0.32)\",\"zIndex\":2},\"sections\":{\"0\":{\"links\":[{\"label\":\"youtube\",\"url\":\"https://www.youtube.com\"},{\"label\":\"twitch\",\"url\":\"https://www.twitch.tv\"}],\"label\":\"\"},\"1\":{\"links\":[{\"label\":\"insta\",\"url\":\"https://www.instagram.com\"},{\"label\":\"twitter\",\"url\":\"https://www.twitter.com\"}],\"label\":\"1\"},\"2\":{\"links\":[{\"label\":\"spotify\",\"url\":\"https://open.spotify.com\"},{\"label\":\"soundcloud\",\"url\":\"https://www.soundcloud.com\"}],\"label\":\"2\"}},\"clockIntervalId\":2},{\"id\":\"container-2\",\"name\":\"clock\",\"x\":\"821px\",\"y\":\"65px\",\"height\":62,\"width\":153,\"settings\":{\"backgroundRgba\":\"rgba(255,255,255,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"16\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"\",\"linkSize\":\"16\",\"linkDecor\":true,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":true,\"headerColor\":\"#deddda\",\"headerSize\":\"24\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"0\",\"shadowRgba\":\"rgba(255,255,255,.90)\",\"zIndex\":1},\"sections\":{},\"clockIntervalId\":3},{\"id\":\"container-3\",\"name\":\"middle\",\"x\":\"787px\",\"y\":\"206px\",\"height\":475,\"width\":213,\"settings\":{\"backgroundRgba\":\"rgba(99,92,86,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"0\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#f6f5f4\",\"linkSize\":\"16\",\"linkDecor\":false,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"200\",\"shadowRgba\":\"rgba(255,255,255,0.32)\",\"zIndex\":3},\"sections\":{\"0\":{\"links\":[{\"label\":\"gmail\",\"url\":\"https://www.gmail.com\"},{\"label\":\"proton\",\"url\":\"https://proton.me/mail\"}],\"label\":\"\"},\"1\":{\"links\":[{\"label\":\"drive\",\"url\":\"https://drive.google.com\"},{\"label\":\"photos\",\"url\":\"https://photos.google.com\"}],\"label\":\"1\"},\"2\":{\"links\":[{\"label\":\"maps\",\"url\":\"https://maps.google.com\"},{\"label\":\"earth\",\"url\":\"https://earth.google.com\"}],\"label\":\"2\"}},\"clockIntervalId\":4},{\"id\":\"container-4\",\"name\":\"right\",\"x\":\"1220px\",\"y\":\"206px\",\"height\":475,\"width\":213,\"settings\":{\"backgroundRgba\":\"rgba(99,92,86,0)\",\"backgroundAlpha\":100,\"borderWidth\":\"0\",\"borderRadius\":\"0\",\"borderColor\":\"grey\",\"fontName\":\"\",\"fontCode\":\"\",\"sectionColor\":\"\",\"sectionSize\":\"0\",\"sectionItalic\":false,\"sectionBold\":false,\"linkColor\":\"#f6f5f4\",\"linkSize\":\"16\",\"linkDecor\":false,\"linkBold\":false,\"linkItalic\":false,\"enableDate\":false,\"enableClock\":false,\"headerColor\":\"\",\"headerSize\":\"16\",\"headerBold\":false,\"headerItalic\":false,\"enableDivider\":false,\"dividerColor\":\"\",\"textAlign\":\"center\",\"shadowX\":\"0\",\"shadowY\":\"0\",\"shadowBlur\":\"200\",\"shadowRgba\":\"rgba(255,255,255,0.32)\",\"zIndex\":4},\"sections\":{\"0\":{\"links\":[{\"label\":\"github\",\"url\":\"https://www.github.com\"},{\"label\":\"mdn\",\"url\":\"https://developer.mozilla.org/\"}],\"label\":\"\"},\"1\":{\"links\":[{\"label\":\"stack overflow\",\"url\":\"https://www.stackoverflow.com\"},{\"label\":\"arch wiki\",\"url\":\"https://wiki.archlinux.org/title/Main_page\"}],\"label\":\"1\"},\"2\":{\"links\":[{\"label\":\"/g/\",\"url\":\"https://boards.4chan.org/g/\"},{\"label\":\"monkeytype\",\"url\":\"https://monkeytype.com/\"}],\"label\":\"2\"}},\"clockIntervalId\":5}]","wallpaper":"\"#0f0b1a\"","repeatWallpaper":"false","zIndexMapData":"{\"1\":\"container-2\",\"2\":\"container-1\",\"3\":\"container-3\",\"4\":\"container-4\"}","audioLink":"\"\"","activeTabId":"\"containerTab\"","settingsMenuData":"{\"x\":\"1160px\",\"y\":\"84px\",\"width\":329,\"height\":444}","editToggleRgba":"rgba(0,0,0,1)","cursors":"{}"} \ No newline at end of file