Move generated/icons/ to icons/

Update version to 0.7.3
- Update Dependencies - Switch to "check-internet-connected" module for checking if user is online/offline - Show message box when error occurs on RPC connection - Update LICENSE and copyright - Update useragents
2026-02-17 09:02:10 +00:00 · 2022-10-07 17:31:10 +05:30 · 2022-10-07 17:28:02 +05:30 · 2022-10-07 17:24:25 +05:30 · 2022-10-07 15:42:31 +05:30 · 2022-10-07 15:41:58 +05:30
77 changed files with 21929 additions and 363 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+yarn.lock
+node_modules/
+docs/
+.github/
+README.md
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,15 @@
+module.exports = {
+    "env": {
+        "commonjs": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    },
+    "rules": {
+    }
+}
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,6 +1,6 @@
 name: Build/release

-on: push
+on: workflow_dispatch

 jobs:
  release:
@@ -11,21 +11,17 @@ jobs:
        os: [macos-latest, ubuntu-latest, windows-latest]

    steps:
-      - name: Check out Git repository
+      - name: Checkout code
        uses: actions/checkout@v1

      - name: Install Node.js, NPM and Yarn
        uses: actions/setup-node@v1
        with:
-          node-version: 16
+          node-version: 18

-      - name: Build/release Electron app
-        uses: samuelmeuli/action-electron-builder@v1
-        with:
-          # GitHub token, automatically provided to the action
-          # (No need to define this secret in the repo settings)
-          github_token: ${{ secrets.github_token }}
-
-          # If the commit is tagged with a version (e.g. "v1.0.0"),
-          # release the app after building
-          release: ${{ startsWith(github.ref, 'refs/tags/v') }}
+      - name: Build and release with electron-builder
+        run: |
+          export GH_TOKEN=${{ secrets.GITHUB_TOKEN }}
+          yarn install
+          yarn dist -c.snap.publish=github
+        shell: bash
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -0,0 +1,50 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+  schedule:
+    - cron: '16 11 * * 0'
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status 
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install ESLint
+        run: |
+          npm install eslint@8.10.0
+          npm install @microsoft/eslint-formatter-sarif@2.1.7
+
+      - name: Run ESLint
+        run: npx eslint .
+          --config .eslintrc.js
+          --ext .js,.jsx,.ts,.tsx
+          --format @microsoft/eslint-formatter-sarif 
+          --output-file eslint-results.sarif
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 /node_modules/
 /.idea/
-/yarn.lock
-/release/
+/release/
+.DS_Store
+flatpak-node-generator.py
+generated-sources.json
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,3 @@
+yarn.lock
+node_modules/
+README.md
--- a/Intro_Image.png
+++ b/Intro_Image.png
--- a/license.txt
+++ b/license.txt
@@ -1,22 +1,21 @@
-MIT License
-
-Copyright (c) 2021 Agampreet Singh
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
+MIT License
+
+Copyright (c) 2021-2022 Agampreet Singh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/MSlogo.svg
+++ b/MSlogo.svg
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="57px" height="30px" viewBox="0 0 57 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
-    <title>MDlogo</title>
-    <desc>Created with Sketch.</desc>
-    <defs/>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="42">
-        <g id="thumb" transform="translate(-4.000000, -18.000000)">
-            <g id="MD" transform="translate(2.000000, 4.000000)">
-                <text id="M" font-family="Roboto-Black, Roboto" font-weight="700" letter-spacing="5.46875048" fill="#000000">
-                    <tspan x="0.0136716366" y="44">M</tspan>
-                </text>
-                <text id="D" font-family="Roboto-Light, Roboto" font-weight="300" letter-spacing="5.46875" fill="#A8244F">
-                    <tspan x="33.484375" y="44">S</tspan>
-                </text>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/Preview/Ubuntu
+++ b/Preview/Ubuntu
--- a/Preview/Windows
+++ b/Preview/Windows
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 <a href="https://electronjs.org">
 <img align="center" src="https://img.shields.io/badge/Developed%20With-Electron-red?logo=Electron&logoColor=white&style=flat">  
 </a>
-<a href="https://github.com/agam778/MS-Office-Electron/blob/main/license.txt">
+<a href="https://github.com/agam778/MS-Office-Electron/blob/main/LICENSE">
 <img align="center" src="https://img.shields.io/github/license/agam778/MS-Office-Electron?style=flat">  
 </a>
 <a  href="https://github.com/agam778/MS-Office-Electron/releases/">
@@ -21,33 +21,37 @@
 <a href="https://github.com/agam778/MS-Office-Electron/releases/latest/">
 <img align="center" src="https://img.shields.io/github/downloads/agam778/MS-Office-Electron/latest/total?label=Downloads%40Latest">
 </a>
+ <a href="https://github.com/agam778/MS-Office-Electron/actions/workflows/build.yml">
+  <img align="center" src="https://github.com/agam778/MS-Office-Electron/actions/workflows/build.yml/badge.svg">
+ </a>
 </p>

 # Table of contents

-1. [Introduction](#Introduction)
-2. [Windows](#Windows)
-   1. [Windows Installation](#-windows-installation)
-   2. [Windows Preview](#windows-preview)
-3. [macOS](#macOS)
-   1. [macOS Installation](#-macOS-installation)
-4. [Linux](#linux)
-   1. [Linux Installation](#-linux-installation)
-      1. [Ubuntu/Debian based distribution installation](#ubuntudebian-based-distribution-installation)
-      2. [Red Hat/Fedora based distribution installation](#red-hatfedora-based-distribution-installation)
-      3. [Arch/Manjaro Linux based distribution installation](#archmanjaro-linux-based-distribution-installation)
-   2. [Ubuntu Preview](#ubuntu-preview)
-   3. [Fedora Preview](#fedora-preview)
-5. [MIT License](#-mit-license)
-   1. [Disclamier](#disclaimer-not-affiliated-with-microsoft)
+- [Table of contents](#table-of-contents)
+- [Introduction](#introduction)
+- [Windows](#windows)
+  - [💿 Windows Installation](#-windows-installation)
+  - [📸 Windows Preview](#-windows-preview)
+- [macOS](#macos)
+  - [💿 macOS Installation](#-macos-installation)
+- [Linux](#linux)
+  - [💿 Linux Installation](#-linux-installation)
+    - [Ubuntu/Debian based distribution installation](#ubuntudebian-based-distribution-installation)
+    - [Red Hat/Fedora based distribution installation](#red-hatfedora-based-distribution-installation)
+    - [Arch/Manjaro Linux based distribution installation](#archmanjaro-linux-based-distribution-installation)
+  - [📸 Ubuntu Preview](#-ubuntu-preview)
+- [💻 Developing Locally](#-developing-locally)
+- [📃 MIT License](#-mit-license)
+      - [*Disclaimer: Not affiliated with Microsoft. Office, the name, website, images/icons are the intellectual properties of Microsoft.*](#disclaimer-not-affiliated-with-microsoft-office-the-name-website-imagesicons-are-the-intellectual-properties-of-microsoft)

 # Introduction

 As we know that Microsoft Office is a paid service, they also have a free Web version [here](https://office.com).

-For those people who can't afford Microsoft Office Subscription, or don't want to pay for that, or like the web version of it, Then **MS Office - Electron** is the app you require.
+For those people who can't afford Microsoft Office Subscription, or don't want to pay for that, or like the web version of it, Then **MS-Office-Electron** is the app you require.

-**MS Office - Electron** is the app in which the Web Version of Microsoft Office is wrapped into a Cross-Platform App with Electron. And all the Services of Microsoft Office will work for free.
+**MS-Office-Electron** is the app in which the Web Version of Microsoft Office is wrapped into a Cross-Platform App with Electron. And all the Services of Microsoft Office will work for free.

 Note - Windows Hello or Sign in with Security key is not currently supported and will show you an error. You will have to manually sign in with your E-Mail and Password.

@@ -62,7 +66,7 @@ Supported Platforms
 5. All Distributions supporting AppImage (AppImage File)

 Arch Linux builds are now on AUR!<br>
-Mac OS supported now with builds for both M1 And Intel Chips . See the instructions how to install below<br>
+Mac OS is supported now! See the instructions how to install below<br>

 # Windows

@@ -85,13 +89,17 @@ For Installing this app on Windows :-
 For Installing this app on Mac :-

 1. Just go to the [Releases](https://github.com/agam778/MS-Office-Electron/releases) page
-2. Scroll down and click the `.dmg` file. The build with no architecture written is for Intel Macs (Will fix it soon) and the build with arm64 written in it is for M1 Macs. Download the build according to your Mac.
+2. Scroll down and click the `.dmg` file. The build is only for Intel Macs.
 3. After it downloads, click on the file and mount it on your system. Now drag my app to the Applications Folder (There will be a shortcut in the opened window too) and your app will be installed. Open from Launchpad and enjoy.

 # Linux

 ## 💿 Linux Installation

+<a href="https://snapcraft.io/ms-office-electron">
+  <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" />
+</a>
+
 ### Ubuntu/Debian based distribution installation

 For Installing in Ubuntu/Debian based distribution :- 
@@ -114,9 +122,17 @@ Arch Linux builds have been published to "AUR" now!

 1. Install any AUR helper like [`yay`](https://github.com/Jguer/yay)

-2. The package name is `ms-office-electron-git`, so run `yay -Sy ms-office-electron-git`
+2. There are 2 packages in the AUR
+   - `ms-office-electron-bin`: For installing pre-built releases
+   - `ms-office-electron-git`: For building the app from source and installing.

-3. Wait for it to install and tada! The app is installed.
+3. Now, for example, using `yay`, run:
+   ```bash
+   yay -Sy ms-office-electron-*
+   ```
+   To install the package accordingly.
+
+4. Wait for it to install and tada! The app is installed.

 If you find any issues in using the AUR Builds, please create a [New Issue](https://github.com/agam778/MS-Office-Electron/issues/new) and i'll try to fix that as soon as possible :D

@@ -124,10 +140,40 @@ If you find any issues in using the AUR Builds, please create a [New Issue](http

 [Click Here](https://github.com/agam778/MS-Office-Electron/blob/main/Preview/Ubuntu%20Preview.png?raw=true)

+# 💻 Developing Locally
+To build the app locally:<br>
+Run this script to automatically install `nodejs`, `yarn` and all the dependencies, and automatically start/build the app (it will show options) (Note: for Linux and macOS Only!):
+```bash
+git clone https://github.com/agam778/MS-Office-Electron.git
+cd MS-Office-Electron
+bash build.sh
+```
+<br>
+Or:<br>
+Run the following commands to clone the repository and install the dependencies

+```bash
+git clone https://github.com/agam778/MS-0ffice-Electron.git
+cd MS-Office-Electron
+yarn install
+```
+```bash
+$ yarn run
+yarn run v1.22.18
+info Commands available from binary scripts: asar, dircompare, ejs, electron, electron-builder, electron-osx-flat, electron-osx-sign, extract-zip, install-app-deps, is-ci, jake, js-yaml, json5, mime, mkdirp, node-which, rc, rimraf, semver
+info Project commands
+   - dist
+      electron-builder
+   - pack
+      electron-builder --dir
+   - start
+      electron .
+question Which command would you like to run?:
+```

-
+To start the app, run `yarn start`<br>
+To build the app, run `yarn dist`

 # 📃 MIT License

-#### *Disclaimer: Not affiliated with Microsoft*
+#### *Disclaimer: Not affiliated with Microsoft. Office, the name, website, images/icons are the intellectual properties of Microsoft.*
--- a/assets/flatpak/io.github.agam778.MS-Office-Electron.desktop
+++ b/assets/flatpak/io.github.agam778.MS-Office-Electron.desktop
@@ -0,0 +1,10 @@
+[Desktop Entry]
+Name=MS-Office-Electrom
+GenericName=MS-Office-Electron
+Comment=A Microsoft Office Online Desktop Client made with Electron. Free of Cost.
+Keywords=ms-office;office;electron;cloud
+Exec=start-ms-office-electron
+Icon=io.github.agam778.MS-Office-Electron
+Type=Application
+Terminal=false
+Categories=Office
--- a/assets/flatpak/io.github.agam778.MS-Office-Electron.metainfo.xml
+++ b/assets/flatpak/io.github.agam778.MS-Office-Electron.metainfo.xml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop-application">
+    <id>io.github.agam778.MS-Office-Electron</id>
+    <launchable type="desktop-id">io.github.agam778.MS-Office-Electron.desktop</launchable>
+    <metadata_license>CC0-1.0</metadata_license>
+    <project_license>MIT</project_license>
+
+    <name>MS-Office-Electron</name>
+
+    <categories>
+        <category>Utility</category>
+    </categories>
+
+    <summary>A Microsoft Office Online Desktop Client made with Electron. Free of Cost.</summary>
+
+    <description>
+      <p>MS-Office-Electron is an app in which the Web Version of Microsoft Office is wrapped into a Cross-Platform App with Electron. And all the Services of Microsoft Office will work for free.</p>
+    </description>
+
+    <developer_name>Agampreet Singh</developer_name>
+
+    <releases>
+      <release version="0.7.2" date="2022-05-20">
+        <description>
+          <p>Remove electron-icon-maker dependency and remove 'yarn genicon' command</p>
+        </description>
+      </release>
+    </releases>
+
+    <screenshots>
+      <screenshot type="default"><image type="source">https://dashboard.snapcraft.io/site_media/appmedia/2022/05/Screenshot_from_2022-05-15_22-10-14.png</image></screenshot>
+      <screenshot><image type="source">https://dashboard.snapcraft.io/site_media/appmedia/2022/05/Screenshot_from_2022-05-15_22-11-27.png</image></screenshot>
+    </screenshots>
+
+    <content_rating type="oars-1.1" />
+
+    <metadata>
+        <value key="GnomeSoftware::popular-background">https://dashboard.snapcraft.io/site_media/appmedia/2022/05/Untitled_design1.png</value>
+    </metadata>
+
+    <url type="homepage">https://github.com/agam778/MS-Office-Electron/</url>
+    <url type="bugtracker">https://github.com/agam778/MS-Office-Electron/issues</url>
+</component>
--- a/assets/icon.png
+++ b/assets/icon.png
--- a/assets/icons/download-fail.png
+++ b/assets/icons/download-fail.png
--- a/assets/icons/download-success.png
+++ b/assets/icons/download-success.png
--- a/assets/icons/download.png
+++ b/assets/icons/download.png
--- a/assets/icons/mac/icon.icns
+++ b/assets/icons/mac/icon.icns
--- a/assets/icons/png/1024x1024.png
+++ b/assets/icons/png/1024x1024.png
--- a/assets/icons/png/128x128.png
+++ b/assets/icons/png/128x128.png
--- a/assets/icons/png/16x16.png
+++ b/assets/icons/png/16x16.png
--- a/assets/icons/png/24x24.png
+++ b/assets/icons/png/24x24.png
--- a/assets/icons/png/256x256.png
+++ b/assets/icons/png/256x256.png
--- a/assets/icons/png/32x32.png
+++ b/assets/icons/png/32x32.png
--- a/assets/icons/png/48x48.png
+++ b/assets/icons/png/48x48.png
--- a/assets/icons/png/512x512.png
+++ b/assets/icons/png/512x512.png
--- a/assets/icons/png/64x64.png
+++ b/assets/icons/png/64x64.png
--- a/assets/icons/win/icon.ico
+++ b/assets/icons/win/icon.ico
--- a/build.sh
+++ b/build.sh
@@ -0,0 +1,224 @@
+#!/bin/bash
+# This script helps you to start/build the MS-Office-Electron app
+if ! [ -x "$(command -v node)" ]; then
+    echo 'Error: nodejs is not installed.' >&2
+    echo 'Installing nodejs now; this may take a while.'
+    if [ "$(uname)" == "Linux" ]; then
+        if [ "$(id -u)" != "0" ]; then
+            if [ -f /etc/debian_version ]; then
+                curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash -
+                sudo apt-get install -y nodejs
+                sudo apt-get install rpm -y # for rpm build.
+                elif [ -f /etc/redhat-release ]; then
+                sudo yum install nodejs
+                elif [ -f /etc/arch-release ]; then
+                sudo pacman -S nodejs
+                elif [ -f /etc/gentoo-release ]; then
+                sudo emerge nodejs
+                elif [ -f /etc/SuSE-release ]; then
+                sudo zypper install nodejs
+                elif [ -f /etc/fedora-release ]; then
+                sudo dnf install nodejs
+                elif [ -f /etc/centos-release ]; then
+                sudo yum install nodejs
+                elif [ -f /etc/nixos ]; then
+                sudo nix-env -iA nodejs
+            fi
+        else
+            if [ -f /etc/debian_version ]; then
+                curl -fsSL https://deb.nodesource.com/setup_17.x | bash -
+                apt-get install -y nodejs
+                elif [ -f /etc/redhat-release ]; then
+                yum install nodejs
+                elif [ -f /etc/arch-release ]; then
+                pacman -S nodejs
+                elif [ -f /etc/gentoo-release ]; then
+                emerge nodejs
+                elif [ -f /etc/SuSE-release ]; then
+                zypper install nodejs
+                elif [ -f /etc/fedora-release ]; then
+                dnf install nodejs
+                elif [ -f /etc/centos-release ]; then
+                yum install nodejs
+                elif [ -f /etc/nixos ]; then
+                nix-env -iA nodejs
+            fi
+        fi
+        elif [ "$(uname)" == "Darwin" ]; then
+        brew install node
+        elif [ "$(uname)" == "MINGW32_NT-10.0" ]; then
+        echo 'Error: nodejs is not installed.' >&2
+        echo 'Please install nodejs manually.'
+        exit 0
+    fi
+fi
+
+if ! [ -x "$(command -v yarn)" ]; then
+    echo 'Error: yarn is not installed.' >&2
+    echo 'Installing yarn now; this may take a while.'
+    if [ "$(uname)" == "Linux" ]; then
+        if [ "$(id -u)" != "0" ]; then
+            if [ -f /etc/debian_version ]; then
+                sudo apt-get install -y yarn
+                elif [ -f /etc/redhat-release ]; then
+                sudo yum install yarn
+                elif [ -f /etc/arch-release ]; then
+                sudo pacman -S yarn
+                elif [ -f /etc/gentoo-release ]; then
+                sudo emerge yarn
+                elif [ -f /etc/SuSE-release ]; then
+                sudo zypper install yarn
+                elif [ -f /etc/fedora-release ]; then
+                sudo dnf install yarn
+                elif [ -f /etc/centos-release ]; then
+                sudo yum install yarn
+                elif [ -f /etc/nixos ]; then
+                sudo nix-env -iA yarn
+            fi
+        else
+            if [ -f /etc/debian_version ]; then
+                apt-get install -y yarn
+                elif [ -f /etc/redhat-release ]; then
+                yum install yarn
+                elif [ -f /etc/arch-release ]; then
+                pacman -S yarn
+                elif [ -f /etc/gentoo-release ]; then
+                emerge yarn
+                elif [ -f /etc/SuSE-release ]; then
+                zypper install yarn
+                elif [ -f /etc/fedora-release ]; then
+                dnf install yarn
+                elif [ -f /etc/centos-release ]; then
+                yum install yarn
+                elif [ -f /etc/nixos ]; then
+                nix-env -iA yarn
+            fi
+        fi
+        elif [ "$(uname)" == "Darwin" ]; then
+        brew install yarn
+        elif [ "$(uname)" == "MINGW32_NT-10.0" ]; then
+        echo 'Error: yarn is not installed.' >&2
+        echo 'Please install yarn manually.'
+        exit 0
+    fi
+fi
+
+if [ -d "./.git" ]; then
+    echo "Detected a cloned repository, Continuing..."
+else
+    echo "Repository not found, cloning now..."
+    if ! [ -x "$(command -v git)" ]; then
+        echo 'Error: git is not installed.' >&2
+        echo 'Installing git now; this may take a while.'
+        if [ "$(uname)" == "Linux" ]; then
+            if [ "$(id -u)" == "0" ]; then
+                if [ -f /etc/debian_version ]; then
+                    apt-get install git
+                    elif [ -f /etc/redhat-release ]; then
+                    yum install git
+                    elif [ -f /etc/arch-release ]; then
+                    pacman -S git
+                    elif [ -f /etc/gentoo-release ]; then
+                    emerge git
+                    elif [ -f /etc/SuSE-release ]; then
+                    zypper install git
+                    elif [ -f /etc/fedora-release ]; then
+                    dnf install git
+                    elif [ -f /etc/centos-release ]; then
+                    yum install git
+                    elif [ -f /etc/nixos ]; then
+                    nix-env -iA git
+                fi
+            else
+                if [ -f /etc/debian_version ]; then
+                    sudo apt-get install git
+                    elif [ -f /etc/redhat-release ]; then
+                    sudo yum install git
+                    elif [ -f /etc/arch-release ]; then
+                    sudo pacman -S git
+                    elif [ -f /etc/gentoo-release ]; then
+                    sudo emerge git
+                    elif [ -f /etc/SuSE-release ]; then
+                    sudo zypper install git
+                    elif [ -f /etc/fedora-release ]; then
+                    sudo dnf install git
+                    elif [ -f /etc/centos-release ]; then
+                    sudo yum install git
+                    elif [ -f /etc/nixos ]; then
+                    sudo nix-env -iA git
+                fi
+            fi
+            elif [ "$(uname)" == "Darwin" ]; then
+            brew install git
+            elif [ "$(uname)" == "MINGW32_NT-10.0" ]; then
+            echo 'Error: git is not installed.' >&2
+            echo 'Please install git manually.'
+        fi
+    fi
+    git clone --depth=1 https://github.com/agam778/MS-Office-Electron; cd MS-Office-Electron || echo "Failed to change directory." && return 1
+    echo 'Cloned the repository'
+fi
+
+clear
+echo 'Installing Dependencies'
+if [ "$(id -u)" != "0" ]; then
+    sudo yarn install
+else
+    yarn install
+fi
+
+clear
+echo 'What do you want to do?'
+echo '1. Run the app without building'
+echo '2. Build the app'
+echo '3. Build and install the app'
+echo '4. Exit'
+echo 'Enter your choice:'; read choice;
+if [ "$choice" -eq "1" ]; then
+    echo 'Running the app...'
+    yarn start
+    elif [ "$choice" -eq "2" ]; then
+    echo 'Building the app...'
+    if [ "$(id -u)" != "0" ]; then
+        if [ "$(uname -m)" == "arm64" ]; then
+            sudo yarn dist --arm64
+            elif [ "$(uname -m)" == "x86_64" ]; then
+            sudo yarn dist --x64
+        fi
+    else
+        if [ "$(uname -m)" == "arm64" ]; then
+            yarn dist --arm64
+            elif [ "$(uname -m)" == "x86_64" ]; then
+            yarn dist --x64
+        fi
+    fi
+    elif [ "$choice" -eq "3" ]; then
+    echo 'Building and installing the app...'
+    if ! [ -f /etc/debian_version ]; then
+        echo 'Error: "Build and install the app" option is only supported on Debian-based systems for now.' >&2
+        exit 0
+    fi
+    if [ "$(id -u)" != "0" ]; then
+        if [ "$(uname -m)" == "arm64" ]; then
+            sudo yarn dist --arm64
+            sudo apt install -y -f ./release/MS-Office-Electron*.deb
+            elif [ "$(uname -m)" == "x86_64" ]; then
+            sudo yarn dist --x64
+            sudo apt install -y -f ./release/MS-Office-Electron*.deb
+        fi
+    else
+        if [ "$(uname -m)" == "arm64" ]; then
+            yarn dist --arm64
+            apt install -y -f ./release/MS-Office-Electron*.deb
+            elif [ "$(uname -m)" == "x86_64" ]; then
+            yarn dist --x64
+            apt install -y -f ./release/MS-Office-Electron*.deb
+        fi
+    fi
+    elif [ "$choice" -eq "4" ]; then
+    echo 'Exiting...'
+    exit 1
+fi
+
+echo 'Finished successfully! 🎉 '
+exit 0
--- a/docs/README.md
+++ b/docs/README.md
@@ -0,0 +1,7 @@
+# MS-Office-Electron
+
+A Microsoft Office Online Desktop Client made with Electron. Free of Cost.
+
+# Website
+
+Just a website for the MS-Office-Electron App, nothing much
--- a/docs/assets/css/fontawesome-all.min.css
+++ b/docs/assets/css/fontawesome-all.min.css
--- a/docs/assets/css/images/overlay.png
+++ b/docs/assets/css/images/overlay.png
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
--- a/docs/assets/js/breakpoints.min.js
+++ b/docs/assets/js/breakpoints.min.js
@@ -0,0 +1,150 @@
+/* breakpoints.js v1.0 | @ajlkn | MIT licensed */
+var breakpoints = (function () {
+  "use strict";
+  function e(e) {
+    t.init(e);
+  }
+  var t = {
+    list: null,
+    media: {},
+    events: [],
+    init: function (e) {
+      (t.list = e),
+        window.addEventListener("resize", t.poll),
+        window.addEventListener("orientationchange", t.poll),
+        window.addEventListener("load", t.poll),
+        window.addEventListener("fullscreenchange", t.poll);
+    },
+    active: function (e) {
+      var n, a, s, i, r, d, c;
+      if (!(e in t.media)) {
+        if (
+          (">=" == e.substr(0, 2)
+            ? ((a = "gte"), (n = e.substr(2)))
+            : "<=" == e.substr(0, 2)
+            ? ((a = "lte"), (n = e.substr(2)))
+            : ">" == e.substr(0, 1)
+            ? ((a = "gt"), (n = e.substr(1)))
+            : "<" == e.substr(0, 1)
+            ? ((a = "lt"), (n = e.substr(1)))
+            : "!" == e.substr(0, 1)
+            ? ((a = "not"), (n = e.substr(1)))
+            : ((a = "eq"), (n = e)),
+          n && n in t.list)
+        )
+          if (((i = t.list[n]), Array.isArray(i))) {
+            if (((r = parseInt(i[0])), (d = parseInt(i[1])), isNaN(r))) {
+              if (isNaN(d)) return;
+              c = i[1].substr(String(d).length);
+            } else c = i[0].substr(String(r).length);
+            if (isNaN(r))
+              switch (a) {
+                case "gte":
+                  s = "screen";
+                  break;
+                case "lte":
+                  s = "screen and (max-width: " + d + c + ")";
+                  break;
+                case "gt":
+                  s = "screen and (min-width: " + (d + 1) + c + ")";
+                  break;
+                case "lt":
+                  s = "screen and (max-width: -1px)";
+                  break;
+                case "not":
+                  s = "screen and (min-width: " + (d + 1) + c + ")";
+                  break;
+                default:
+                  s = "screen and (max-width: " + d + c + ")";
+              }
+            else if (isNaN(d))
+              switch (a) {
+                case "gte":
+                  s = "screen and (min-width: " + r + c + ")";
+                  break;
+                case "lte":
+                  s = "screen";
+                  break;
+                case "gt":
+                  s = "screen and (max-width: -1px)";
+                  break;
+                case "lt":
+                  s = "screen and (max-width: " + (r - 1) + c + ")";
+                  break;
+                case "not":
+                  s = "screen and (max-width: " + (r - 1) + c + ")";
+                  break;
+                default:
+                  s = "screen and (min-width: " + r + c + ")";
+              }
+            else
+              switch (a) {
+                case "gte":
+                  s = "screen and (min-width: " + r + c + ")";
+                  break;
+                case "lte":
+                  s = "screen and (max-width: " + d + c + ")";
+                  break;
+                case "gt":
+                  s = "screen and (min-width: " + (d + 1) + c + ")";
+                  break;
+                case "lt":
+                  s = "screen and (max-width: " + (r - 1) + c + ")";
+                  break;
+                case "not":
+                  s =
+                    "screen and (max-width: " +
+                    (r - 1) +
+                    c +
+                    "), screen and (min-width: " +
+                    (d + 1) +
+                    c +
+                    ")";
+                  break;
+                default:
+                  s =
+                    "screen and (min-width: " +
+                    r +
+                    c +
+                    ") and (max-width: " +
+                    d +
+                    c +
+                    ")";
+              }
+          } else s = "(" == i.charAt(0) ? "screen and " + i : i;
+        t.media[e] = !!s && s;
+      }
+      return t.media[e] !== !1 && window.matchMedia(t.media[e]).matches;
+    },
+    on: function (e, n) {
+      t.events.push({ query: e, handler: n, state: !1 }), t.active(e) && n();
+    },
+    poll: function () {
+      var e, n;
+      for (e = 0; e < t.events.length; e++)
+        (n = t.events[e]),
+          t.active(n.query)
+            ? n.state || ((n.state = !0), n.handler())
+            : n.state && (n.state = !1);
+    },
+  };
+  return (
+    (e._ = t),
+    (e.on = function (e, n) {
+      t.on(e, n);
+    }),
+    (e.active = function (e) {
+      return t.active(e);
+    }),
+    e
+  );
+})();
+!(function (e, t) {
+  "function" == typeof define && define.amd
+    ? define([], t)
+    : "object" == typeof exports
+    ? (module.exports = t())
+    : (e.breakpoints = t());
+})(this, function () {
+  return breakpoints;
+});
--- a/docs/assets/js/browser.min.js
+++ b/docs/assets/js/browser.min.js
@@ -0,0 +1,118 @@
+/* browser.js v1.0 | @ajlkn | MIT licensed */
+var browser = (function () {
+  "use strict";
+  var e = {
+    name: null,
+    version: null,
+    os: null,
+    osVersion: null,
+    touch: null,
+    mobile: null,
+    _canUse: null,
+    canUse: function (n) {
+      e._canUse || (e._canUse = document.createElement("div"));
+      var o = e._canUse.style,
+        r = n.charAt(0).toUpperCase() + n.slice(1);
+      return (
+        n in o ||
+        "Moz" + r in o ||
+        "Webkit" + r in o ||
+        "O" + r in o ||
+        "ms" + r in o
+      );
+    },
+    init: function () {
+      var n,
+        o,
+        r,
+        i,
+        t = navigator.userAgent;
+      for (
+        n = "other",
+          o = 0,
+          r = [
+            ["firefox", /Firefox\/([0-9\.]+)/],
+            ["bb", /BlackBerry.+Version\/([0-9\.]+)/],
+            ["bb", /BB[0-9]+.+Version\/([0-9\.]+)/],
+            ["opera", /OPR\/([0-9\.]+)/],
+            ["opera", /Opera\/([0-9\.]+)/],
+            ["edge", /Edge\/([0-9\.]+)/],
+            ["safari", /Version\/([0-9\.]+).+Safari/],
+            ["chrome", /Chrome\/([0-9\.]+)/],
+            ["ie", /MSIE ([0-9]+)/],
+            ["ie", /Trident\/.+rv:([0-9]+)/],
+          ],
+          i = 0;
+        i < r.length;
+        i++
+      )
+        if (t.match(r[i][1])) {
+          (n = r[i][0]), (o = parseFloat(RegExp.$1));
+          break;
+        }
+      for (
+        e.name = n,
+          e.version = o,
+          n = "other",
+          o = 0,
+          r = [
+            [
+              "ios",
+              /([0-9_]+) like Mac OS X/,
+              function (e) {
+                return e.replace("_", ".").replace("_", "");
+              },
+            ],
+            [
+              "ios",
+              /CPU like Mac OS X/,
+              function (e) {
+                return 0;
+              },
+            ],
+            ["wp", /Windows Phone ([0-9\.]+)/, null],
+            ["android", /Android ([0-9\.]+)/, null],
+            [
+              "mac",
+              /Macintosh.+Mac OS X ([0-9_]+)/,
+              function (e) {
+                return e.replace("_", ".").replace("_", "");
+              },
+            ],
+            ["windows", /Windows NT ([0-9\.]+)/, null],
+            ["bb", /BlackBerry.+Version\/([0-9\.]+)/, null],
+            ["bb", /BB[0-9]+.+Version\/([0-9\.]+)/, null],
+            ["linux", /Linux/, null],
+            ["bsd", /BSD/, null],
+            ["unix", /X11/, null],
+          ],
+          i = 0;
+        i < r.length;
+        i++
+      )
+        if (t.match(r[i][1])) {
+          (n = r[i][0]),
+            (o = parseFloat(r[i][2] ? r[i][2](RegExp.$1) : RegExp.$1));
+          break;
+        }
+      (e.os = n),
+        (e.osVersion = o),
+        (e.touch =
+          "wp" == e.os
+            ? navigator.msMaxTouchPoints > 0
+            : !!("ontouchstart" in window)),
+        (e.mobile =
+          "wp" == e.os || "android" == e.os || "ios" == e.os || "bb" == e.os);
+    },
+  };
+  return e.init(), e;
+})();
+!(function (e, n) {
+  "function" == typeof define && define.amd
+    ? define([], n)
+    : "object" == typeof exports
+    ? (module.exports = n())
+    : (e.browser = n());
+})(this, function () {
+  return browser;
+});
--- a/docs/assets/js/jquery.min.js
+++ b/docs/assets/js/jquery.min.js
--- a/docs/assets/js/jquery.poptrox.min.js
+++ b/docs/assets/js/jquery.poptrox.min.js
@@ -0,0 +1,611 @@
+/* jquery.poptrox.js v2.5.2-dev | (c) @ajlkn | github.com/ajlkn/jquery.poptrox | MIT licensed */
+!(function (e) {
+  (e.fn.poptrox_disableSelection = function () {
+    return e(this)
+      .css("user-select", "none")
+      .css("-khtml-user-select", "none")
+      .css("-moz-user-select", "none")
+      .css("-o-user-select", "none")
+      .css("-webkit-user-select", "none");
+  }),
+    (e.fn.poptrox = function (o) {
+      if (0 == this.length) return e(this);
+      if (this.length > 1) {
+        for (var t = 0; t < this.length; t++) e(this[t]).poptrox(o);
+        return e(this);
+      }
+      var p,
+        i,
+        s = e.extend(
+          {
+            preload: !1,
+            baseZIndex: 1e3,
+            fadeSpeed: 300,
+            overlayColor: "#000000",
+            overlayOpacity: 0.6,
+            overlayClass: "poptrox-overlay",
+            windowMargin: 50,
+            windowHeightPad: 0,
+            selector: "a",
+            caption: null,
+            parent: "body",
+            popupSpeed: 300,
+            popupWidth: 200,
+            popupHeight: 100,
+            popupIsFixed: !1,
+            useBodyOverflow: !1,
+            usePopupEasyClose: !0,
+            usePopupForceClose: !1,
+            usePopupLoader: !0,
+            usePopupCloser: !0,
+            usePopupCaption: !1,
+            usePopupNav: !1,
+            usePopupDefaultStyling: !0,
+            popupBackgroundColor: "#FFFFFF",
+            popupTextColor: "#000000",
+            popupLoaderTextSize: "2em",
+            popupCloserBackgroundColor: "#000000",
+            popupCloserTextColor: "#FFFFFF",
+            popupCloserTextSize: "20px",
+            popupPadding: 10,
+            popupCaptionHeight: 60,
+            popupCaptionTextSize: null,
+            popupBlankCaptionText: "(untitled)",
+            popupCloserText: "&#215;",
+            popupLoaderText: "&bull;&bull;&bull;&bull;",
+            popupClass: "poptrox-popup",
+            popupSelector: null,
+            popupLoaderSelector: ".loader",
+            popupCloserSelector: ".closer",
+            popupCaptionSelector: ".caption",
+            popupNavPreviousSelector: ".nav-previous",
+            popupNavNextSelector: ".nav-next",
+            onPopupClose: null,
+            onPopupOpen: null,
+          },
+          o
+        ),
+        r = e(this),
+        n = e("body"),
+        a = e('<div class="' + s.overlayClass + '"></div>'),
+        l = e(window),
+        u = [],
+        d = 0,
+        h = !1,
+        g = new Array(),
+        f = function () {
+          (p = l.width()), (i = l.height() + s.windowHeightPad);
+          var e = Math.abs(x.width() - x.outerWidth()),
+            o = Math.abs(x.height() - x.outerHeight()),
+            t = p - 2 * s.windowMargin - e,
+            r = i - 2 * s.windowMargin - o;
+          x.css("min-width", s.popupWidth).css("min-height", s.popupHeight),
+            v.children().css("max-width", t).css("max-height", r);
+        };
+      s.usePopupLoader || (s.popupLoaderSelector = null),
+        s.usePopupCloser || (s.popupCloserSelector = null),
+        s.usePopupCaption || (s.popupCaptionSelector = null),
+        s.usePopupNav ||
+          ((s.popupNavPreviousSelector = null),
+          (s.popupNavNextSelector = null));
+      var x;
+      x = e(
+        s.popupSelector
+          ? s.popupSelector
+          : '<div class="' +
+              s.popupClass +
+              '">' +
+              (s.popupLoaderSelector
+                ? '<div class="loader">' + s.popupLoaderText + "</div>"
+                : "") +
+              '<div class="pic"></div>' +
+              (s.popupCaptionSelector ? '<div class="caption"></div>' : "") +
+              (s.popupCloserSelector
+                ? '<span class="closer">' + s.popupCloserText + "</span>"
+                : "") +
+              (s.popupNavPreviousSelector
+                ? '<div class="nav-previous"></div>'
+                : "") +
+              (s.popupNavNextSelector ? '<div class="nav-next"></div>' : "") +
+              "</div>"
+      );
+      var v = x.find(".pic"),
+        w = e(),
+        b = x.find(s.popupLoaderSelector),
+        m = x.find(s.popupCaptionSelector),
+        C = x.find(s.popupCloserSelector),
+        y = x.find(s.popupNavNextSelector),
+        S = x.find(s.popupNavPreviousSelector),
+        P = y.add(S);
+      if (
+        s.usePopupDefaultStyling &&
+        (x
+          .css("background", s.popupBackgroundColor)
+          .css("color", s.popupTextColor)
+          .css("padding", s.popupPadding + "px"),
+        m.length > 0 &&
+          (x.css("padding-bottom", s.popupCaptionHeight + "px"),
+          m
+            .css("position", "absolute")
+            .css("left", "0")
+            .css("bottom", "0")
+            .css("width", "100%")
+            .css("text-align", "center")
+            .css("height", s.popupCaptionHeight + "px")
+            .css("line-height", s.popupCaptionHeight + "px"),
+          s.popupCaptionTextSize && m.css("font-size", popupCaptionTextSize)),
+        C.length > 0 &&
+          C.html(s.popupCloserText)
+            .css("font-size", s.popupCloserTextSize)
+            .css("background", s.popupCloserBackgroundColor)
+            .css("color", s.popupCloserTextColor)
+            .css("display", "block")
+            .css("width", "40px")
+            .css("height", "40px")
+            .css("line-height", "40px")
+            .css("text-align", "center")
+            .css("position", "absolute")
+            .css("text-decoration", "none")
+            .css("outline", "0")
+            .css("top", "0")
+            .css("right", "-40px"),
+        b.length > 0 &&
+          b
+            .html("")
+            .css("position", "relative")
+            .css("font-size", s.popupLoaderTextSize)
+            .on("startSpinning", function (o) {
+              var t = e("<div>" + s.popupLoaderText + "</div>");
+              t
+                .css("height", Math.floor(s.popupHeight / 2) + "px")
+                .css("overflow", "hidden")
+                .css("line-height", Math.floor(s.popupHeight / 2) + "px")
+                .css("text-align", "center")
+                .css(
+                  "margin-top",
+                  Math.floor(
+                    (x.height() -
+                      t.height() +
+                      (m.length > 0 ? m.height() : 0)) /
+                      2
+                  )
+                )
+                .css("color", s.popupTextColor ? s.popupTextColor : "")
+                .on("xfin", function () {
+                  t.fadeTo(300, 0.5, function () {
+                    t.trigger("xfout");
+                  });
+                })
+                .on("xfout", function () {
+                  t.fadeTo(300, 0.05, function () {
+                    t.trigger("xfin");
+                  });
+                })
+                .trigger("xfin"),
+                b.append(t);
+            })
+            .on("stopSpinning", function (e) {
+              var o = b.find("div");
+              o.remove();
+            }),
+        2 == P.length)
+      ) {
+        P.css("font-size", "75px")
+          .css("text-align", "center")
+          .css("color", "#fff")
+          .css("text-shadow", "none")
+          .css("height", "100%")
+          .css("position", "absolute")
+          .css("top", "0")
+          .css("opacity", "0.35")
+          .css("cursor", "pointer")
+          .css("box-shadow", "inset 0px 0px 10px 0px rgba(0,0,0,0)")
+          .poptrox_disableSelection();
+        var k, T;
+        s.usePopupEasyClose
+          ? ((k = "100px"), (T = "100px"))
+          : ((k = "75%"), (T = "25%")),
+          y
+            .css("right", "0")
+            .css("width", k)
+            .html(
+              '<div style="position: absolute; height: 100px; width: 125px; top: 50%; right: 0; margin-top: -50px;">&gt;</div>'
+            ),
+          S.css("left", "0")
+            .css("width", T)
+            .html(
+              '<div style="position: absolute; height: 100px; width: 125px; top: 50%; left: 0; margin-top: -50px;">&lt;</div>'
+            );
+      }
+      return (
+        l.on("resize orientationchange", function () {
+          f();
+        }),
+        m.on("update", function (e, o) {
+          (o && 0 != o.length) || (o = s.popupBlankCaptionText), m.html(o);
+        }),
+        C.css("cursor", "pointer").on("click", function (e) {
+          return (
+            e.preventDefault(),
+            e.stopPropagation(),
+            x.trigger("poptrox_close"),
+            !0
+          );
+        }),
+        y.on("click", function (e) {
+          e.stopPropagation(), e.preventDefault(), x.trigger("poptrox_next");
+        }),
+        S.on("click", function (e) {
+          e.stopPropagation(),
+            e.preventDefault(),
+            x.trigger("poptrox_previous");
+        }),
+        a
+          .css("position", "fixed")
+          .css("left", 0)
+          .css("top", 0)
+          .css("z-index", s.baseZIndex)
+          .css("width", "100%")
+          .css("height", "100%")
+          .css("text-align", "center")
+          .css("cursor", "pointer")
+          .appendTo(s.parent)
+          .prepend(
+            '<div style="display:inline-block;height:100%;vertical-align:middle;"></div>'
+          )
+          .append(
+            '<div style="position:absolute;left:0;top:0;width:100%;height:100%;background:' +
+              s.overlayColor +
+              ";opacity:" +
+              s.overlayOpacity +
+              ";filter:alpha(opacity=" +
+              100 * s.overlayOpacity +
+              ');"></div>'
+          )
+          .hide()
+          .on("touchmove", function (e) {
+            return !1;
+          })
+          .on("click", function (e) {
+            e.preventDefault(), e.stopPropagation(), x.trigger("poptrox_close");
+          }),
+        x
+          .css("display", "inline-block")
+          .css("vertical-align", "middle")
+          .css("position", "relative")
+          .css("z-index", 1)
+          .css("cursor", "auto")
+          .appendTo(a)
+          .hide()
+          .on("poptrox_next", function () {
+            var e = d + 1;
+            e >= u.length && (e = 0), x.trigger("poptrox_switch", [e]);
+          })
+          .on("poptrox_previous", function () {
+            var e = d - 1;
+            e < 0 && (e = u.length - 1), x.trigger("poptrox_switch", [e]);
+          })
+          .on("poptrox_reset", function () {
+            f(),
+              x.data("width", s.popupWidth).data("height", s.popupHeight),
+              b.hide().trigger("stopSpinning"),
+              m.hide(),
+              C.hide(),
+              P.hide(),
+              v.hide(),
+              w.attr("src", "").detach();
+          })
+          .on("poptrox_open", function (e, o) {
+            return (
+              !!h ||
+              ((h = !0),
+              s.useBodyOverflow && n.css("overflow", "hidden"),
+              s.onPopupOpen && s.onPopupOpen(),
+              x.addClass("loading"),
+              void a.fadeTo(s.fadeSpeed, 1, function () {
+                x.trigger("poptrox_switch", [o, !0]);
+              }))
+            );
+          })
+          .on("poptrox_switch", function (o, t, p) {
+            var i;
+            if (!p && h) return !0;
+            if (
+              ((h = !0),
+              x
+                .addClass("loading")
+                .css("width", x.data("width"))
+                .css("height", x.data("height")),
+              m.hide(),
+              w.attr("src") && w.attr("src", ""),
+              w.detach(),
+              (i = u[t]),
+              (w = i.object),
+              w.off("load"),
+              v.css("text-indent", "-9999px").show().append(w),
+              "ajax" == i.type
+                ? e.get(i.src, function (e) {
+                    w.html(e), w.trigger("load");
+                  })
+                : w.attr("src", i.src),
+              "image" != i.type)
+            ) {
+              var r, n;
+              (r = i.width),
+                (n = i.height),
+                "%" == r.slice(-1) &&
+                  (r =
+                    (parseInt(r.substring(0, r.length - 1)) / 100) * l.width()),
+                "%" == n.slice(-1) &&
+                  (n =
+                    (parseInt(n.substring(0, n.length - 1)) / 100) *
+                    l.height()),
+                w
+                  .css("position", "relative")
+                  .css("outline", "0")
+                  .css("z-index", s.baseZIndex + 100)
+                  .width(r)
+                  .height(n);
+            }
+            b.trigger("startSpinning").fadeIn(300),
+              x.show(),
+              s.popupIsFixed
+                ? (x
+                    .removeClass("loading")
+                    .width(s.popupWidth)
+                    .height(s.popupHeight),
+                  w.on("load", function () {
+                    w.off("load"),
+                      b.hide().trigger("stopSpinning"),
+                      m.trigger("update", [i.captionText]).fadeIn(s.fadeSpeed),
+                      C.fadeIn(s.fadeSpeed),
+                      v
+                        .css("text-indent", 0)
+                        .hide()
+                        .fadeIn(s.fadeSpeed, function () {
+                          h = !1;
+                        }),
+                      (d = t),
+                      P.fadeIn(s.fadeSpeed);
+                  }))
+                : w.on("load", function () {
+                    f(), w.off("load"), b.hide().trigger("stopSpinning");
+                    var e = w.width(),
+                      o = w.height(),
+                      p = function () {
+                        m
+                          .trigger("update", [i.captionText])
+                          .fadeIn(s.fadeSpeed),
+                          C.fadeIn(s.fadeSpeed),
+                          v
+                            .css("text-indent", 0)
+                            .hide()
+                            .fadeIn(s.fadeSpeed, function () {
+                              h = !1;
+                            }),
+                          (d = t),
+                          P.fadeIn(s.fadeSpeed),
+                          x
+                            .removeClass("loading")
+                            .data("width", e)
+                            .data("height", o)
+                            .css("width", "auto")
+                            .css("height", "auto");
+                      };
+                    e == x.data("width") && o == x.data("height")
+                      ? p()
+                      : x.animate(
+                          { width: e, height: o },
+                          s.popupSpeed,
+                          "swing",
+                          p
+                        );
+                  }),
+              "image" != i.type && w.trigger("load");
+          })
+          .on("poptrox_close", function () {
+            return (
+              !(!h || s.usePopupForceClose) ||
+              ((h = !0),
+              x.hide().trigger("poptrox_reset"),
+              s.onPopupClose && s.onPopupClose(),
+              void a.fadeOut(s.fadeSpeed, function () {
+                s.useBodyOverflow && n.css("overflow", "auto"), (h = !1);
+              }))
+            );
+          })
+          .trigger("poptrox_reset"),
+        s.usePopupEasyClose
+          ? (m.on("click", "a", function (e) {
+              e.stopPropagation();
+            }),
+            x.css("cursor", "pointer").on("click", function (e) {
+              e.stopPropagation(),
+                e.preventDefault(),
+                x.trigger("poptrox_close");
+            }))
+          : x.on("click", function (e) {
+              e.stopPropagation();
+            }),
+        l.keydown(function (e) {
+          if (x.is(":visible"))
+            switch (e.keyCode) {
+              case 37:
+              case 32:
+                if (s.usePopupNav) return x.trigger("poptrox_previous"), !1;
+                break;
+              case 39:
+                if (s.usePopupNav) return x.trigger("poptrox_next"), !1;
+                break;
+              case 27:
+                return x.trigger("poptrox_close"), !1;
+            }
+        }),
+        r.find(s.selector).each(function (o) {
+          var t,
+            p,
+            i = e(this),
+            r = i.find("img"),
+            n = i.data("poptrox");
+          if ("ignore" != n && i.attr("href")) {
+            if (
+              ((t = {
+                src: i.attr("href"),
+                captionText: r.attr("title"),
+                width: null,
+                height: null,
+                type: null,
+                object: null,
+                options: null,
+              }),
+              s.caption)
+            ) {
+              if ("function" == typeof s.caption) c = s.caption(i);
+              else if ("selector" in s.caption) {
+                var a;
+                (a = i.find(s.caption.selector)),
+                  "attribute" in s.caption
+                    ? (c = a.attr(s.caption.attribute))
+                    : ((c = a.html()), s.caption.remove === !0 && a.remove());
+              }
+            } else c = r.attr("title");
+            if (((t.captionText = c), n)) {
+              var l = n.split(",");
+              0 in l && (t.type = l[0]),
+                1 in l &&
+                  ((p = l[1].match(/([0-9%]+)x([0-9%]+)/)),
+                  p && 3 == p.length && ((t.width = p[1]), (t.height = p[2]))),
+                2 in l && (t.options = l[2]);
+            }
+            if (!t.type)
+              switch (
+                ((p = t.src.match(/\/\/([a-z0-9\.]+)\/.*/)),
+                (!p || p.length < 2) && (p = [!1]),
+                p[1])
+              ) {
+                case "api.soundcloud.com":
+                  t.type = "soundcloud";
+                  break;
+                case "youtu.be":
+                  t.type = "youtube";
+                  break;
+                case "vimeo.com":
+                  t.type = "vimeo";
+                  break;
+                case "wistia.net":
+                  t.type = "wistia";
+                  break;
+                case "bcove.me":
+                  t.type = "bcove";
+                  break;
+                default:
+                  t.type = "image";
+              }
+            switch (((p = t.src.match(/\/\/[a-z0-9\.]+\/(.*)/)), t.type)) {
+              case "iframe":
+                (t.object = e('<iframe src="" frameborder="0"></iframe>')),
+                  t.object
+                    .on("click", function (e) {
+                      e.stopPropagation();
+                    })
+                    .css("cursor", "auto"),
+                  (t.width && t.height) ||
+                    ((t.width = "600"), (t.height = "400"));
+                break;
+              case "ajax":
+                (t.object = e('<div class="poptrox-ajax"></div>')),
+                  t.object
+                    .on("click", function (e) {
+                      e.stopPropagation();
+                    })
+                    .css("cursor", "auto")
+                    .css("overflow", "auto"),
+                  (t.width && t.height) ||
+                    ((t.width = "600"), (t.height = "400"));
+                break;
+              case "soundcloud":
+                (t.object = e(
+                  '<iframe scrolling="no" frameborder="no" src=""></iframe>'
+                )),
+                  (t.src =
+                    "//w.soundcloud.com/player/?url=" +
+                    escape(t.src) +
+                    (t.options ? "&" + t.options : "")),
+                  (t.width = "600"),
+                  (t.height = "166");
+                break;
+              case "youtube":
+                (t.object = e(
+                  '<iframe src="" frameborder="0" allowfullscreen="1"></iframe>'
+                )),
+                  (t.src =
+                    "//www.youtube.com/embed/" +
+                    p[1] +
+                    (t.options ? "?" + t.options : "")),
+                  (t.width && t.height) ||
+                    ((t.width = "800"), (t.height = "480"));
+                break;
+              case "vimeo":
+                (t.object = e(
+                  '<iframe src="" frameborder="0" allowFullScreen="1"></iframe>'
+                )),
+                  (t.src =
+                    "//player.vimeo.com/video/" +
+                    p[1] +
+                    (t.options ? "?" + t.options : "")),
+                  (t.width && t.height) ||
+                    ((t.width = "800"), (t.height = "480"));
+                break;
+              case "wistia":
+                (t.object = e(
+                  '<iframe src="" frameborder="0" allowFullScreen="1"></iframe>'
+                )),
+                  (t.src =
+                    "//fast.wistia.net/" +
+                    p[1] +
+                    (t.options ? "?" + t.options : "")),
+                  (t.width && t.height) ||
+                    ((t.width = "800"), (t.height = "480"));
+                break;
+              case "bcove":
+                (t.object = e(
+                  '<iframe src="" frameborder="0" allowFullScreen="1" width="100%"></iframe>'
+                )),
+                  (t.src =
+                    "//bcove.me/" + p[1] + (t.options ? "?" + t.options : "")),
+                  (t.width && t.height) ||
+                    ((t.width = "640"), (t.height = "360"));
+                break;
+              default:
+                if (
+                  ((t.object = e(
+                    '<img src="" alt="" style="vertical-align:bottom" />'
+                  )),
+                  s.preload)
+                ) {
+                  var p = document.createElement("img");
+                  (p.src = t.src), g.push(p);
+                }
+                (t.width = i.attr("width")), (t.height = i.attr("height"));
+            }
+            "file:" == window.location.protocol &&
+              t.src.match(/^\/\//) &&
+              (t.src = "http:" + t.src),
+              u.push(t),
+              r.removeAttr("title"),
+              i
+                .removeAttr("href")
+                .css("cursor", "pointer")
+                .css("outline", 0)
+                .on("click", function (e) {
+                  e.preventDefault(),
+                    e.stopPropagation(),
+                    x.trigger("poptrox_open", [o]);
+                });
+          }
+        }),
+        r.prop("_poptrox", s),
+        r
+      );
+    });
+})(jQuery);
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -0,0 +1,108 @@
+/*
+	Strata by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+(function ($) {
+  var $window = $(window),
+    $body = $("body"),
+    $header = $("#header"),
+    $footer = $("#footer"),
+    $main = $("#main"),
+    settings = {
+      // Parallax background effect?
+      parallax: true,
+
+      // Parallax factor (lower = more intense, higher = less intense).
+      parallaxFactor: 20,
+    };
+
+  // Breakpoints.
+  breakpoints({
+    xlarge: ["1281px", "1800px"],
+    large: ["981px", "1280px"],
+    medium: ["737px", "980px"],
+    small: ["481px", "736px"],
+    xsmall: [null, "480px"],
+  });
+
+  // Play initial animations on page load.
+  $window.on("load", function () {
+    window.setTimeout(function () {
+      $body.removeClass("is-preload");
+    }, 100);
+  });
+
+  // Touch?
+  if (browser.mobile) {
+    // Turn on touch mode.
+    $body.addClass("is-touch");
+
+    // Height fix (mostly for iOS).
+    window.setTimeout(function () {
+      $window.scrollTop($window.scrollTop() + 1);
+    }, 0);
+  }
+
+  // Footer.
+  breakpoints.on("<=medium", function () {
+    $footer.insertAfter($main);
+  });
+
+  breakpoints.on(">medium", function () {
+    $footer.appendTo($header);
+  });
+
+  // Header.
+
+  // Parallax background.
+
+  // Disable parallax on IE (smooth scrolling is jerky), and on mobile platforms (= better performance).
+  if (browser.name == "ie" || browser.mobile) settings.parallax = false;
+
+  if (settings.parallax) {
+    breakpoints.on("<=medium", function () {
+      $window.off("scroll.strata_parallax");
+      $header.css("background-position", "");
+    });
+
+    breakpoints.on(">medium", function () {
+      $header.css("background-position", "left 0px");
+
+      $window.on("scroll.strata_parallax", function () {
+        $header.css(
+          "background-position",
+          "left " +
+            -1 * (parseInt($window.scrollTop()) / settings.parallaxFactor) +
+            "px"
+        );
+      });
+    });
+
+    $window.on("load", function () {
+      $window.triggerHandler("scroll");
+    });
+  }
+
+  // Main Sections: Two.
+
+  // Lightbox gallery.
+  $window.on("load", function () {
+    $("#two").poptrox({
+      caption: function ($a) {
+        return $a.next("h3").text();
+      },
+      overlayColor: "#2c2c2c",
+      overlayOpacity: 0.85,
+      popupCloserText: "",
+      popupLoaderText: "",
+      selector: ".work-item a.image",
+      usePopupCaption: true,
+      usePopupDefaultStyling: false,
+      usePopupEasyClose: false,
+      usePopupNav: true,
+      windowMargin: breakpoints.active("<=small") ? 0 : 50,
+    });
+  });
+})(jQuery);
--- a/docs/assets/js/util.js
+++ b/docs/assets/js/util.js
@@ -0,0 +1,490 @@
+(function ($) {
+  /**
+   * Generate an indented list of links from a nav. Meant for use with panel().
+   * @return {jQuery} jQuery object.
+   */
+  $.fn.navList = function () {
+    var $this = $(this);
+    ($a = $this.find("a")), (b = []);
+
+    $a.each(function () {
+      var $this = $(this),
+        indent = Math.max(0, $this.parents("li").length - 1),
+        href = $this.attr("href"),
+        target = $this.attr("target");
+
+      b.push(
+        "<a " +
+          'class="link depth-' +
+          indent +
+          '"' +
+          (typeof target !== "undefined" && target != ""
+            ? ' target="' + target + '"'
+            : "") +
+          (typeof href !== "undefined" && href != ""
+            ? ' href="' + href + '"'
+            : "") +
+          ">" +
+          '<span class="indent-' +
+          indent +
+          '"></span>' +
+          $this.text() +
+          "</a>"
+      );
+    });
+
+    return b.join("");
+  };
+
+  /**
+   * Panel-ify an element.
+   * @param {object} userConfig User config.
+   * @return {jQuery} jQuery object.
+   */
+  $.fn.panel = function (userConfig) {
+    // No elements?
+    if (this.length == 0) return $this;
+
+    // Multiple elements?
+    if (this.length > 1) {
+      for (var i = 0; i < this.length; i++) $(this[i]).panel(userConfig);
+
+      return $this;
+    }
+
+    // Vars.
+    var $this = $(this),
+      $body = $("body"),
+      $window = $(window),
+      id = $this.attr("id"),
+      config;
+
+    // Config.
+    config = $.extend(
+      {
+        // Delay.
+        delay: 0,
+
+        // Hide panel on link click.
+        hideOnClick: false,
+
+        // Hide panel on escape keypress.
+        hideOnEscape: false,
+
+        // Hide panel on swipe.
+        hideOnSwipe: false,
+
+        // Reset scroll position on hide.
+        resetScroll: false,
+
+        // Reset forms on hide.
+        resetForms: false,
+
+        // Side of viewport the panel will appear.
+        side: null,
+
+        // Target element for "class".
+        target: $this,
+
+        // Class to toggle.
+        visibleClass: "visible",
+      },
+      userConfig
+    );
+
+    // Expand "target" if it's not a jQuery object already.
+    if (typeof config.target != "jQuery") config.target = $(config.target);
+
+    // Panel.
+
+    // Methods.
+    $this._hide = function (event) {
+      // Already hidden? Bail.
+      if (!config.target.hasClass(config.visibleClass)) return;
+
+      // If an event was provided, cancel it.
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      // Hide.
+      config.target.removeClass(config.visibleClass);
+
+      // Post-hide stuff.
+      window.setTimeout(function () {
+        // Reset scroll position.
+        if (config.resetScroll) $this.scrollTop(0);
+
+        // Reset forms.
+        if (config.resetForms)
+          $this.find("form").each(function () {
+            this.reset();
+          });
+      }, config.delay);
+    };
+
+    // Vendor fixes.
+    $this
+      .css("-ms-overflow-style", "-ms-autohiding-scrollbar")
+      .css("-webkit-overflow-scrolling", "touch");
+
+    // Hide on click.
+    if (config.hideOnClick) {
+      $this.find("a").css("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+
+      $this.on("click", "a", function (event) {
+        var $a = $(this),
+          href = $a.attr("href"),
+          target = $a.attr("target");
+
+        if (!href || href == "#" || href == "" || href == "#" + id) return;
+
+        // Cancel original event.
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Hide panel.
+        $this._hide();
+
+        // Redirect to href.
+        window.setTimeout(function () {
+          if (target == "_blank") window.open(href);
+          else window.location.href = href;
+        }, config.delay + 10);
+      });
+    }
+
+    // Event: Touch stuff.
+    $this.on("touchstart", function (event) {
+      $this.touchPosX = event.originalEvent.touches[0].pageX;
+      $this.touchPosY = event.originalEvent.touches[0].pageY;
+    });
+
+    $this.on("touchmove", function (event) {
+      if ($this.touchPosX === null || $this.touchPosY === null) return;
+
+      var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
+        diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
+        th = $this.outerHeight(),
+        ts = $this.get(0).scrollHeight - $this.scrollTop();
+
+      // Hide on swipe?
+      if (config.hideOnSwipe) {
+        var result = false,
+          boundary = 20,
+          delta = 50;
+
+        switch (config.side) {
+          case "left":
+            result = diffY < boundary && diffY > -1 * boundary && diffX > delta;
+            break;
+
+          case "right":
+            result =
+              diffY < boundary && diffY > -1 * boundary && diffX < -1 * delta;
+            break;
+
+          case "top":
+            result = diffX < boundary && diffX > -1 * boundary && diffY > delta;
+            break;
+
+          case "bottom":
+            result =
+              diffX < boundary && diffX > -1 * boundary && diffY < -1 * delta;
+            break;
+
+          default:
+            break;
+        }
+
+        if (result) {
+          $this.touchPosX = null;
+          $this.touchPosY = null;
+          $this._hide();
+
+          return false;
+        }
+      }
+
+      // Prevent vertical scrolling past the top or bottom.
+      if (
+        ($this.scrollTop() < 0 && diffY < 0) ||
+        (ts > th - 2 && ts < th + 2 && diffY > 0)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+
+    // Event: Prevent certain events inside the panel from bubbling.
+    $this.on("click touchend touchstart touchmove", function (event) {
+      event.stopPropagation();
+    });
+
+    // Event: Hide panel if a child anchor tag pointing to its ID is clicked.
+    $this.on("click", 'a[href="#' + id + '"]', function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      config.target.removeClass(config.visibleClass);
+    });
+
+    // Body.
+
+    // Event: Hide panel on body click/tap.
+    $body.on("click touchend", function (event) {
+      $this._hide(event);
+    });
+
+    // Event: Toggle.
+    $body.on("click", 'a[href="#' + id + '"]', function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      config.target.toggleClass(config.visibleClass);
+    });
+
+    // Window.
+
+    // Event: Hide on ESC.
+    if (config.hideOnEscape)
+      $window.on("keydown", function (event) {
+        if (event.keyCode == 27) $this._hide(event);
+      });
+
+    return $this;
+  };
+
+  /**
+   * Apply "placeholder" attribute polyfill to one or more forms.
+   * @return {jQuery} jQuery object.
+   */
+  $.fn.placeholder = function () {
+    // Browser natively supports placeholders? Bail.
+    if (typeof document.createElement("input").placeholder != "undefined")
+      return $(this);
+
+    // No elements?
+    if (this.length == 0) return $this;
+
+    // Multiple elements?
+    if (this.length > 1) {
+      for (var i = 0; i < this.length; i++) $(this[i]).placeholder();
+
+      return $this;
+    }
+
+    // Vars.
+    var $this = $(this);
+
+    // Text, TextArea.
+    $this
+      .find("input[type=text],textarea")
+      .each(function () {
+        var i = $(this);
+
+        if (i.val() == "" || i.val() == i.attr("placeholder"))
+          i.addClass("polyfill-placeholder").val(i.attr("placeholder"));
+      })
+      .on("blur", function () {
+        var i = $(this);
+
+        if (i.attr("name").match(/-polyfill-field$/)) return;
+
+        if (i.val() == "")
+          i.addClass("polyfill-placeholder").val(i.attr("placeholder"));
+      })
+      .on("focus", function () {
+        var i = $(this);
+
+        if (i.attr("name").match(/-polyfill-field$/)) return;
+
+        if (i.val() == i.attr("placeholder"))
+          i.removeClass("polyfill-placeholder").val("");
+      });
+
+    // Password.
+    $this.find("input[type=password]").each(function () {
+      var i = $(this);
+      var x = $(
+        $("<div>")
+          .append(i.clone())
+          .remove()
+          .html()
+          .replace(/type="password"/i, 'type="text"')
+          .replace(/type=password/i, "type=text")
+      );
+
+      if (i.attr("id") != "") x.attr("id", i.attr("id") + "-polyfill-field");
+
+      if (i.attr("name") != "")
+        x.attr("name", i.attr("name") + "-polyfill-field");
+
+      x.addClass("polyfill-placeholder")
+        .val(x.attr("placeholder"))
+        .insertAfter(i);
+
+      if (i.val() == "") i.hide();
+      else x.hide();
+
+      i.on("blur", function (event) {
+        event.preventDefault();
+
+        var x = i
+          .parent()
+          .find("input[name=" + i.attr("name") + "-polyfill-field]");
+
+        if (i.val() == "") {
+          i.hide();
+          x.show();
+        }
+      });
+
+      x.on("focus", function (event) {
+        event.preventDefault();
+
+        var i = x
+          .parent()
+          .find(
+            "input[name=" + x.attr("name").replace("-polyfill-field", "") + "]"
+          );
+
+        x.hide();
+
+        i.show().focus();
+      }).on("keypress", function (event) {
+        event.preventDefault();
+        x.val("");
+      });
+    });
+
+    // Events.
+    $this
+      .on("submit", function () {
+        $this
+          .find("input[type=text],input[type=password],textarea")
+          .each(function (event) {
+            var i = $(this);
+
+            if (i.attr("name").match(/-polyfill-field$/)) i.attr("name", "");
+
+            if (i.val() == i.attr("placeholder")) {
+              i.removeClass("polyfill-placeholder");
+              i.val("");
+            }
+          });
+      })
+      .on("reset", function (event) {
+        event.preventDefault();
+
+        $this.find("select").val($("option:first").val());
+
+        $this.find("input,textarea").each(function () {
+          var i = $(this),
+            x;
+
+          i.removeClass("polyfill-placeholder");
+
+          switch (this.type) {
+            case "submit":
+            case "reset":
+              break;
+
+            case "password":
+              i.val(i.attr("defaultValue"));
+
+              x = i
+                .parent()
+                .find("input[name=" + i.attr("name") + "-polyfill-field]");
+
+              if (i.val() == "") {
+                i.hide();
+                x.show();
+              } else {
+                i.show();
+                x.hide();
+              }
+
+              break;
+
+            case "checkbox":
+            case "radio":
+              i.attr("checked", i.attr("defaultValue"));
+              break;
+
+            case "text":
+            case "textarea":
+              i.val(i.attr("defaultValue"));
+
+              if (i.val() == "") {
+                i.addClass("polyfill-placeholder");
+                i.val(i.attr("placeholder"));
+              }
+
+              break;
+
+            default:
+              i.val(i.attr("defaultValue"));
+              break;
+          }
+        });
+      });
+
+    return $this;
+  };
+
+  /**
+   * Moves elements to/from the first positions of their respective parents.
+   * @param {jQuery} $elements Elements (or selector) to move.
+   * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
+   */
+  $.prioritize = function ($elements, condition) {
+    var key = "__prioritize";
+
+    // Expand $elements if it's not already a jQuery object.
+    if (typeof $elements != "jQuery") $elements = $($elements);
+
+    // Step through elements.
+    $elements.each(function () {
+      var $e = $(this),
+        $p,
+        $parent = $e.parent();
+
+      // No parent? Bail.
+      if ($parent.length == 0) return;
+
+      // Not moved? Move it.
+      if (!$e.data(key)) {
+        // Condition is false? Bail.
+        if (!condition) return;
+
+        // Get placeholder (which will serve as our point of reference for when this element needs to move back).
+        $p = $e.prev();
+
+        // Couldn't find anything? Means this element's already at the top, so bail.
+        if ($p.length == 0) return;
+
+        // Move element to top of parent.
+        $e.prependTo($parent);
+
+        // Mark element as moved.
+        $e.data(key, $p);
+      }
+
+      // Moved already?
+      else {
+        // Condition is true? Bail.
+        if (condition) return;
+
+        $p = $e.data(key);
+
+        // Move element back to its original location (using our placeholder).
+        $e.insertAfter($p);
+
+        // Unmark element as moved.
+        $e.removeData(key);
+      }
+    });
+  };
+})(jQuery);
--- a/docs/assets/sass/libs/_breakpoints.scss
+++ b/docs/assets/sass/libs/_breakpoints.scss
@@ -0,0 +1,202 @@
+// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+/// Breakpoints.
+/// @var {list}
+$breakpoints: () !global;
+
+// Mixins.
+
+/// Sets breakpoints.
+/// @param {map} $x Breakpoints.
+@mixin breakpoints($x: ()) {
+  $breakpoints: $x !global;
+}
+
+/// Wraps @content in a @media block targeting a specific orientation.
+/// @param {string} $orientation Orientation.
+@mixin orientation($orientation) {
+  @media screen and (orientation: #{$orientation}) {
+    @content;
+  }
+}
+
+/// Wraps @content in a @media block using a given query.
+/// @param {string} $query Query.
+@mixin breakpoint($query: null) {
+  $breakpoint: null;
+  $op: null;
+  $media: null;
+
+  // Determine operator, breakpoint.
+
+  // Greater than or equal.
+  @if (str-slice($query, 0, 2) == ">=") {
+    $op: "gte";
+    $breakpoint: str-slice($query, 3);
+  }
+
+  // Less than or equal.
+  @elseif (str-slice($query, 0, 2) == '<=') {
+    $op: "lte";
+    $breakpoint: str-slice($query, 3);
+  }
+
+  // Greater than.
+  @elseif (str-slice($query, 0, 1) == '>') {
+    $op: "gt";
+    $breakpoint: str-slice($query, 2);
+  }
+
+  // Less than.
+  @elseif (str-slice($query, 0, 1) == '<') {
+    $op: "lt";
+    $breakpoint: str-slice($query, 2);
+  }
+
+  // Not.
+  @elseif (str-slice($query, 0, 1) == '!') {
+    $op: "not";
+    $breakpoint: str-slice($query, 2);
+  }
+
+  // Equal.
+  @else {
+    $op: "eq";
+    $breakpoint: $query;
+  }
+
+  // Build media.
+  @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+    $a: map-get($breakpoints, $breakpoint);
+
+    // Range.
+    @if (type-of($a) == "list") {
+      $x: nth($a, 1);
+      $y: nth($a, 2);
+
+      // Max only.
+      @if ($x == null) {
+        // Greater than or equal (>= 0 / anything)
+        @if ($op == "gte") {
+          $media: "screen";
+        }
+
+        // Less than or equal (<= y)
+        @elseif ($op == 'lte') {
+          $media: "screen and (max-width: " + $y + ")";
+        }
+
+        // Greater than (> y)
+        @elseif ($op == 'gt') {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
+
+        // Less than (< 0 / invalid)
+        @elseif ($op == 'lt') {
+          $media: "screen and (max-width: -1px)";
+        }
+
+        // Not (> y)
+        @elseif ($op == 'not') {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
+
+        // Equal (<= y)
+        @else {
+          $media: "screen and (max-width: " + $y + ")";
+        }
+      }
+
+      // Min only.
+      @else if ($y == null) {
+        // Greater than or equal (>= x)
+        @if ($op == "gte") {
+          $media: "screen and (min-width: " + $x + ")";
+        }
+
+        // Less than or equal (<= inf / anything)
+        @elseif ($op == 'lte') {
+          $media: "screen";
+        }
+
+        // Greater than (> inf / invalid)
+        @elseif ($op == 'gt') {
+          $media: "screen and (max-width: -1px)";
+        }
+
+        // Less than (< x)
+        @elseif ($op == 'lt') {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
+
+        // Not (< x)
+        @elseif ($op == 'not') {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
+
+        // Equal (>= x)
+        @else {
+          $media: "screen and (min-width: " + $x + ")";
+        }
+      }
+
+      // Min and max.
+      @else {
+        // Greater than or equal (>= x)
+        @if ($op == "gte") {
+          $media: "screen and (min-width: " + $x + ")";
+        }
+
+        // Less than or equal (<= y)
+        @elseif ($op == 'lte') {
+          $media: "screen and (max-width: " + $y + ")";
+        }
+
+        // Greater than (> y)
+        @elseif ($op == 'gt') {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
+
+        // Less than (< x)
+        @elseif ($op == 'lt') {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
+
+        // Not (< x and > y)
+        @elseif ($op == 'not') {
+          $media: "screen and (max-width: " + ($x - 1) +
+            "), screen and (min-width: " + ($y + 1) + ")";
+        }
+
+        // Equal (>= x and <= y)
+        @else {
+          $media: "screen and (min-width: " +
+            $x +
+            ") and (max-width: " +
+            $y +
+            ")";
+        }
+      }
+    }
+
+    // String.
+    @else {
+      // Missing a media type? Prefix with "screen".
+      @if (str-slice($a, 0, 1) == "(") {
+        $media: "screen and " + $a;
+      }
+
+      // Otherwise, use as-is.
+      @else {
+        $media: $a;
+      }
+    }
+  }
+
+  // Output.
+  @media #{$media} {
+    @content;
+  }
+}
--- a/docs/assets/sass/libs/_functions.scss
+++ b/docs/assets/sass/libs/_functions.scss
@@ -0,0 +1,79 @@
+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {
+  $result: null;
+
+  @if type-of($index) != number {
+    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  } @else if $index == 0 {
+    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  } @else if abs($index) > length($list) {
+    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  } @else {
+    $result: ();
+    $index: if($index < 0, length($list) + $index + 1, $index);
+
+    @for $i from 1 through length($list) {
+      @if $i != $index {
+        $result: append($result, nth($list, $i));
+      }
+    }
+  }
+
+  @return $result;
+}
+
+/// Gets a value from a map.
+/// @author Hugo Giraudel
+/// @param {map} $map Map.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function val($map, $keys...) {
+  @if nth($keys, 1) == null {
+    $keys: remove-nth($keys, 1);
+  }
+
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}
+
+/// Gets a duration value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _duration($keys...) {
+  @return val($duration, $keys...);
+}
+
+/// Gets a font value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _font($keys...) {
+  @return val($font, $keys...);
+}
+
+/// Gets a misc value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _misc($keys...) {
+  @return val($misc, $keys...);
+}
+
+/// Gets a palette value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _palette($keys...) {
+  @return val($palette, $keys...);
+}
+
+/// Gets a size value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _size($keys...) {
+  @return val($size, $keys...);
+}
--- a/docs/assets/sass/libs/_html-grid.scss
+++ b/docs/assets/sass/libs/_html-grid.scss
@@ -0,0 +1,138 @@
+// html-grid.scss v1.0 | @ajlkn | MIT licensed */
+
+// Mixins.
+
+/// Initializes the current element as an HTML grid.
+/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
+/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
+@mixin html-grid($gutters: 1.5em, $suffix: "") {
+  // Initialize.
+  $cols: 12;
+  $multipliers: 0, 0.25, 0.5, 1, 1.5, 2;
+  $unit: 100% / $cols;
+
+  // Suffixes.
+  $suffixes: null;
+
+  @if (type-of($suffix) == "list") {
+    $suffixes: $suffix;
+  } @else {
+    $suffixes: ($suffix);
+  }
+
+  // Gutters.
+  $guttersCols: null;
+  $guttersRows: null;
+
+  @if (type-of($gutters) == "list") {
+    $guttersCols: nth($gutters, 1);
+    $guttersRows: nth($gutters, 2);
+  } @else {
+    $guttersCols: $gutters;
+    $guttersRows: 0;
+  }
+
+  // Row.
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  align-items: stretch;
+
+  // Columns.
+  > * {
+    box-sizing: border-box;
+  }
+
+  // Gutters.
+  &.gtr-uniform {
+    > * {
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // Alignment.
+  &.aln-left {
+    justify-content: flex-start;
+  }
+
+  &.aln-center {
+    justify-content: center;
+  }
+
+  &.aln-right {
+    justify-content: flex-end;
+  }
+
+  &.aln-top {
+    align-items: flex-start;
+  }
+
+  &.aln-middle {
+    align-items: center;
+  }
+
+  &.aln-bottom {
+    align-items: flex-end;
+  }
+
+  // Step through suffixes.
+  @each $suffix in $suffixes {
+    // Suffix.
+    @if ($suffix != "") {
+      $suffix: "-" + $suffix;
+    } @else {
+      $suffix: "";
+    }
+
+    // Row.
+
+    // Important.
+    > .imp#{$suffix} {
+      order: -1;
+    }
+
+    // Columns, offsets.
+    @for $i from 1 through $cols {
+      > .col-#{$i}#{$suffix} {
+        width: $unit * $i;
+      }
+
+      > .off-#{$i}#{$suffix} {
+        margin-left: $unit * $i;
+      }
+    }
+
+    // Step through multipliers.
+    @each $multiplier in $multipliers {
+      // Gutters.
+      $class: null;
+
+      @if ($multiplier != 1) {
+        $class: ".gtr-" + ($multiplier * 100);
+      }
+
+      &#{$class} {
+        margin-top: ($guttersRows * $multiplier * -1);
+        margin-left: ($guttersCols * $multiplier * -1);
+
+        > * {
+          padding: ($guttersRows * $multiplier)
+            0
+            0
+            ($guttersCols * $multiplier);
+        }
+
+        // Uniform.
+        &.gtr-uniform {
+          margin-top: $guttersCols * $multiplier * -1;
+
+          > * {
+            padding-top: $guttersCols * $multiplier;
+          }
+        }
+      }
+    }
+  }
+}
--- a/docs/assets/sass/libs/_mixins.scss
+++ b/docs/assets/sass/libs/_mixins.scss
@@ -0,0 +1,70 @@
+/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+/// @param {string} $category Optional category to use.
+/// @param {string} $where Optional pseudoelement to target (before or after).
+@mixin icon($content: false, $category: regular, $where: before) {
+  text-decoration: none;
+
+  &:#{$where} {
+    @if $content {
+      content: $content;
+    }
+
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    line-height: 1;
+    text-transform: none !important;
+
+    @if ($category == brands) {
+      font-family: "Font Awesome 5 Brands";
+    }
+    @elseif ($category == solid) {
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+    } @else {
+      font-family: "Font Awesome 5 Free";
+      font-weight: 400;
+    }
+  }
+}
+
+/// Applies padding to an element, taking the current element-margin value into account.
+/// @param {mixed} $tb Top/bottom padding.
+/// @param {mixed} $lr Left/right padding.
+/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
+/// @param {bool} $important If true, adds !important.
+@mixin padding($tb, $lr, $pad: (0, 0, 0, 0), $important: null) {
+  @if $important {
+    $important: "!important";
+  }
+
+  $x: 0.1em;
+
+  @if unit(_size(element-margin)) == "rem" {
+    $x: 0.1rem;
+  }
+
+  padding: ($tb + nth($pad, 1)) ($lr + nth($pad, 2))
+    max($x, $tb - _size(element-margin) + nth($pad, 3)) ($lr + nth($pad, 4)) #{$important};
+}
+
+/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
+/// @param {string} $svg SVG data URL.
+/// @return {string} Encoded SVG data URL.
+@function svg-url($svg) {
+  $svg: str-replace($svg, '"', "'");
+  $svg: str-replace($svg, "%", "%25");
+  $svg: str-replace($svg, "<", "%3C");
+  $svg: str-replace($svg, ">", "%3E");
+  $svg: str-replace($svg, "&", "%26");
+  $svg: str-replace($svg, "#", "%23");
+  $svg: str-replace($svg, "{", "%7B");
+  $svg: str-replace($svg, "}", "%7D");
+  $svg: str-replace($svg, ";", "%3B");
+
+  @return url("data:image/svg+xml;charset=utf8,#{$svg}");
+}
--- a/docs/assets/sass/libs/_vars.scss
+++ b/docs/assets/sass/libs/_vars.scss
@@ -0,0 +1,64 @@
+// Misc.
+$misc: (
+  z-index-base: 10000,
+);
+
+// Duration.
+$duration: (
+  transition: 0.2s,
+);
+
+// Size.
+$size: (
+  border-radius: 0.35em,
+  element-height: 2.75em,
+  element-margin: 2em,
+  container-width: 100%,
+);
+
+// Font.
+$font: (
+  family: (
+    "Source Sans Pro",
+    Helvetica,
+    sans-serif,
+  ),
+  family-fixed: (
+    "Courier New",
+    monospace,
+  ),
+  weight: 400,
+  weight-bold: 400,
+);
+
+// Palette.
+$palette: (
+  bg: #fff,
+  fg: #a2a2a2,
+  fg-bold: #787878,
+  fg-light: #b2b2b2,
+  border: #efefef,
+  border-bg: #f7f7f7,
+  border2: #dfdfdf,
+  border2-bg: #e7e7e7,
+  accent1: (
+    bg: #49bf9d,
+    fg: mix(#49bf9d, #ffffff, 25%),
+    fg-bold: #ffffff,
+    fg-light: mix(#49bf9d, #ffffff, 40%),
+    border: rgba(255, 255, 255, 0.25),
+    border-bg: rgba(255, 255, 255, 0.075),
+    border2: rgba(255, 255, 255, 0.5),
+    border2-bg: rgba(255, 255, 255, 0.2),
+  ),
+  accent2: (
+    bg: #1f1815,
+    fg: rgba(255, 255, 255, 0.5),
+    fg-bold: #ffffff,
+    fg-light: rgba(255, 255, 255, 0.4),
+    border: rgba(255, 255, 255, 0.25),
+    border-bg: rgba(255, 255, 255, 0.075),
+    border2: rgba(255, 255, 255, 0.5),
+    border2-bg: rgba(255, 255, 255, 0.2),
+  ),
+);
--- a/docs/assets/sass/libs/_vendor.scss
+++ b/docs/assets/sass/libs/_vendor.scss
@@ -0,0 +1,324 @@
+// vendor.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+/// Vendor prefixes.
+/// @var {list}
+$vendor-prefixes: ("-moz-", "-webkit-", "-ms-", "");
+
+/// Properties that should be vendorized.
+/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+/// @var {list}
+$vendor-properties: (
+  // Animation.
+  "animation",
+  "animation-delay",
+  "animation-direction",
+  "animation-duration",
+  "animation-fill-mode",
+  "animation-iteration-count",
+  "animation-name",
+  "animation-play-state",
+  "animation-timing-function",
+  // Appearance.
+  "appearance",
+  // Backdrop filter.
+  "backdrop-filter",
+  // Background image options.
+  "background-clip",
+  "background-origin",
+  "background-size",
+  // Box sizing.
+  "box-sizing",
+  // Clip path.
+  "clip-path",
+  // Filter effects.
+  "filter",
+  // Flexbox.
+  "align-content",
+  "align-items",
+  "align-self",
+  "flex",
+  "flex-basis",
+  "flex-direction",
+  "flex-flow",
+  "flex-grow",
+  "flex-shrink",
+  "flex-wrap",
+  "justify-content",
+  "order",
+  // Font feature.
+  "font-feature-settings",
+  "font-language-override",
+  "font-variant-ligatures",
+  // Font kerning.
+  "font-kerning",
+  // Fragmented borders and backgrounds.
+  "box-decoration-break",
+  // Grid layout.
+  "grid-column",
+  "grid-column-align",
+  "grid-column-end",
+  "grid-column-start",
+  "grid-row",
+  "grid-row-align",
+  "grid-row-end",
+  "grid-row-start",
+  "grid-template-columns",
+  "grid-template-rows",
+  // Hyphens.
+  "hyphens",
+  "word-break",
+  // Masks.
+  "mask",
+  "mask-border",
+  "mask-border-outset",
+  "mask-border-repeat",
+  "mask-border-slice",
+  "mask-border-source",
+  "mask-border-width",
+  "mask-clip",
+  "mask-composite",
+  "mask-image",
+  "mask-origin",
+  "mask-position",
+  "mask-repeat",
+  "mask-size",
+  // Multicolumn.
+  "break-after",
+  "break-before",
+  "break-inside",
+  "column-count",
+  "column-fill",
+  "column-gap",
+  "column-rule",
+  "column-rule-color",
+  "column-rule-style",
+  "column-rule-width",
+  "column-span",
+  "column-width",
+  "columns",
+  // Object fit.
+  "object-fit",
+  "object-position",
+  // Regions.
+  "flow-from",
+  "flow-into",
+  "region-fragment",
+  // Scroll snap points.
+  "scroll-snap-coordinate",
+  "scroll-snap-destination",
+  "scroll-snap-points-x",
+  "scroll-snap-points-y",
+  "scroll-snap-type",
+  // Shapes.
+  "shape-image-threshold",
+  "shape-margin",
+  "shape-outside",
+  // Tab size.
+  "tab-size",
+  // Text align last.
+  "text-align-last",
+  // Text decoration.
+  "text-decoration-color",
+  "text-decoration-line",
+  "text-decoration-skip",
+  "text-decoration-style",
+  // Text emphasis.
+  "text-emphasis",
+  "text-emphasis-color",
+  "text-emphasis-position",
+  "text-emphasis-style",
+  // Text size adjust.
+  "text-size-adjust",
+  // Text spacing.
+  "text-spacing",
+  // Transform.
+  "transform",
+  "transform-origin",
+  // Transform 3D.
+  "backface-visibility",
+  "perspective",
+  "perspective-origin",
+  "transform-style",
+  // Transition.
+  "transition",
+  "transition-delay",
+  "transition-duration",
+  "transition-property",
+  "transition-timing-function",
+  // Unicode bidi.
+  "unicode-bidi",
+  // User select.
+  "user-select",
+  // Writing mode.
+  "writing-mode"
+);
+
+/// Values that should be vendorized.
+/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+/// @var {list}
+$vendor-values: (
+  // Cross fade.
+  "cross-fade",
+  // Element function.
+  "element",
+  // Filter function.
+  "filter",
+  // Flexbox.
+  "flex",
+  "inline-flex",
+  // Grab cursors.
+  "grab",
+  "grabbing",
+  // Gradients.
+  "linear-gradient",
+  "repeating-linear-gradient",
+  "radial-gradient",
+  "repeating-radial-gradient",
+  // Grid layout.
+  "grid",
+  "inline-grid",
+  // Image set.
+  "image-set",
+  // Intrinsic width.
+  "max-content",
+  "min-content",
+  "fit-content",
+  "fill",
+  "fill-available",
+  "stretch",
+  // Sticky position.
+  "sticky",
+  // Transform.
+  "transform",
+  // Zoom cursors.
+  "zoom-in",
+  "zoom-out"
+);
+
+// Functions.
+
+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {
+  $result: null;
+
+  @if type-of($index) != number {
+    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  } @else if $index == 0 {
+    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  } @else if abs($index) > length($list) {
+    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  } @else {
+    $result: ();
+    $index: if($index < 0, length($list) + $index + 1, $index);
+
+    @for $i from 1 through length($list) {
+      @if $i != $index {
+        $result: append($result, nth($list, $i));
+      }
+    }
+  }
+
+  @return $result;
+}
+
+/// Replaces a substring within another string.
+/// @author Hugo Giraudel
+/// @param {string} $string String.
+/// @param {string} $search Substring.
+/// @param {string} $replace Replacement.
+/// @return {string} Updated string.
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}
+
+/// Replaces a substring within each string in a list.
+/// @param {list} $strings List of strings.
+/// @param {string} $search Substring.
+/// @param {string} $replace Replacement.
+/// @return {list} Updated list of strings.
+@function str-replace-all($strings, $search, $replace: "") {
+  @each $string in $strings {
+    $strings: set-nth(
+      $strings,
+      index($strings, $string),
+      str-replace($string, $search, $replace)
+    );
+  }
+
+  @return $strings;
+}
+
+// Mixins.
+
+/// Wraps @content in vendorized keyframe blocks.
+/// @param {string} $name Name.
+@mixin keyframes($name) {
+  @-moz-keyframes #{$name} {
+    @content;
+  }
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @-ms-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+/// Vendorizes a declaration's property and/or value(s).
+/// @param {string} $property Property.
+/// @param {mixed} $value String/list of value(s).
+@mixin vendor($property, $value) {
+  // Determine if property should expand.
+  $expandProperty: index($vendor-properties, $property);
+
+  // Determine if value should expand (and if so, add '-prefix-' placeholder).
+  $expandValue: false;
+
+  @each $x in $value {
+    @each $y in $vendor-values {
+      @if $y == str-slice($x, 1, str-length($y)) {
+        $value: set-nth($value, index($value, $x), "-prefix-" + $x);
+        $expandValue: true;
+      }
+    }
+  }
+
+  // Expand property?
+  @if $expandProperty {
+    @each $vendor in $vendor-prefixes {
+      #{$vendor}#{$property}: #{str-replace-all($value, "-prefix-", $vendor)};
+    }
+  }
+
+  // Expand just the value?
+  @elseif $expandValue {
+    @each $vendor in $vendor-prefixes {
+      #{$property}: #{str-replace-all($value, "-prefix-", $vendor)};
+    }
+  }
+
+  // Neither? Treat them as a normal declaration.
+  @else {
+    #{$property}: #{$value};
+  }
+}
--- a/docs/assets/sass/main.scss
+++ b/docs/assets/sass/main.scss
--- a/docs/assets/webfonts/fa-brands-400.eot
+++ b/docs/assets/webfonts/fa-brands-400.eot
--- a/docs/assets/webfonts/fa-brands-400.svg
+++ b/docs/assets/webfonts/fa-brands-400.svg
--- a/docs/assets/webfonts/fa-brands-400.ttf
+++ b/docs/assets/webfonts/fa-brands-400.ttf
--- a/docs/assets/webfonts/fa-brands-400.woff
+++ b/docs/assets/webfonts/fa-brands-400.woff
--- a/docs/assets/webfonts/fa-brands-400.woff2
+++ b/docs/assets/webfonts/fa-brands-400.woff2
--- a/docs/assets/webfonts/fa-regular-400.eot
+++ b/docs/assets/webfonts/fa-regular-400.eot
--- a/docs/assets/webfonts/fa-regular-400.svg
+++ b/docs/assets/webfonts/fa-regular-400.svg
--- a/docs/assets/webfonts/fa-regular-400.ttf
+++ b/docs/assets/webfonts/fa-regular-400.ttf
--- a/docs/assets/webfonts/fa-regular-400.woff
+++ b/docs/assets/webfonts/fa-regular-400.woff
--- a/docs/assets/webfonts/fa-regular-400.woff2
+++ b/docs/assets/webfonts/fa-regular-400.woff2
--- a/docs/assets/webfonts/fa-solid-900.eot
+++ b/docs/assets/webfonts/fa-solid-900.eot
--- a/docs/assets/webfonts/fa-solid-900.svg
+++ b/docs/assets/webfonts/fa-solid-900.svg
--- a/docs/assets/webfonts/fa-solid-900.ttf
+++ b/docs/assets/webfonts/fa-solid-900.ttf
--- a/docs/assets/webfonts/fa-solid-900.woff
+++ b/docs/assets/webfonts/fa-solid-900.woff
--- a/docs/assets/webfonts/fa-solid-900.woff2
+++ b/docs/assets/webfonts/fa-solid-900.woff2
--- a/docs/images/Mac_Screenshot.png
+++ b/docs/images/Mac_Screenshot.png
--- a/docs/images/bg.jpg
+++ b/docs/images/bg.jpg
--- a/docs/images/logo.png
+++ b/docs/images/logo.png
--- a/docs/index.html
+++ b/docs/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!--
+	Strata by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+  <head>
+    <title>MS-Office-Electron</title>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
+    <link rel="stylesheet" href="assets/css/main.css" />
+  </head>
+  <body class="is-preload">
+    <!-- Header -->
+    <header id="header">
+      <div class="inner">
+        <a href="#" class="image avatar"
+          ><img src="images/logo.png" alt=""
+        /></a>
+        <h1>
+          <strong>MS-Office-Electron</strong><br />
+          Free Office Online Desktop Client
+        </h1>
+      </div>
+    </header>
+
+    <!-- Main -->
+    <div id="main">
+      <!-- One -->
+      <section id="one">
+        <header class="major">
+          <h2>
+            An Unofficial Microsoft Office Online Desktop Client made with
+            Electron. Free of Cost.
+          </h2>
+        </header>
+        <p>
+          <img
+            src="images/Mac_Screenshot.png"
+            alt=""
+            width="500"
+            height="auto"
+            class="floatright"
+          />
+          MS-Office-Electron is an app in which the Web Version of MS Office
+          is wrapped into a Cross-Platform App with Electron. And all the
+          Services of Microsoft Office will work for free. It is available for
+          Windows, Mac OS, and Linux! If you like the project, do not forget to
+          give a "<i class="far fa-star"></i>
+          Star" to the project :D
+        </p>
+        <h2>Download Now:</h2>
+        <ul class="actions">
+          <li>
+            <a
+              href="https://github.com/agam778/MS-Office-Electron#-windows-installation"
+              class="button"
+              ><i class="fab fa-windows"></i> Windows</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://github.com/agam778/MS-Office-Electron#-macos-installation"
+              class="button"
+              ><i class="fab fa-apple"></i> Mac OS</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://github.com/agam778/MS-Office-Electron#-linux-installation"
+              class="button"
+              ><i class="fab fa-linux"></i> Linux</a
+            >
+          </li>
+        </ul>
+      </section>
+    </div>
+
+    <!-- Footer -->
+    <footer id="footer">
+      <div class="inner">
+        <ul class="icons">
+          <li>
+            <a
+              href="https://github.com/agam778/MS-Office-Electron"
+              class="icon brands fa-github"
+              ><span class="label">Github</span></a
+            >
+          </li>
+          <li>
+            <a href="mailto:agam778@zohomail.in" class="icon solid fa-envelope"
+              ><span class="label">Email</span></a
+            >
+          </li>
+        </ul>
+        <ul class="copyright">
+          <li>&copy; Agampreet Singh</li>
+          <li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+        </ul>
+      </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="assets/js/jquery.min.js"></script>
+    <script src="assets/js/jquery.poptrox.min.js"></script>
+    <script src="assets/js/browser.min.js"></script>
+    <script src="assets/js/breakpoints.min.js"></script>
+    <script src="assets/js/util.js"></script>
+    <script src="assets/js/main.js"></script>
+  </body>
+</html>
--- a/docs/loading/index.html
+++ b/docs/loading/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Loading MS-Office-Electron</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
+    />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <!-- partial:index.partial.html -->
+    <div id="particles-background" class="vertical-centered-box"></div>
+    <div id="particles-foreground" class="vertical-centered-box"></div>
+
+    <div class="vertical-centered-box">
+      <div class="content">
+        <div class="loader-circle"></div>
+        <div class="loader-line-mask">
+          <div class="loader-line"></div>
+        </div>
+        <img
+          width="50px"
+          height="auto"
+          viewBox="0 0 36 24"
+          src="https://github.com/agam778/MS-Office-Electron/raw/main/assets/icon.png"
+        />
+      </div>
+    </div>
+    <!-- partial -->
+    <script src="./script.js"></script>
+    <!-- add text in bottom left corner -->
+    <style>
+
+    </style>
+    <div class="credittext">
+      <p>
+        Design Credits: <a href="https://codepen.io/kenchen/pen/vYwvbZ">kenchen</a>
+      </p>
+  </body>
+</html>
--- a/docs/loading/script.js
+++ b/docs/loading/script.js
@@ -0,0 +1,390 @@
+/*!
+ * Particleground
+ *
+ * @author Jonathan Nicol - @mrjnicol
+ * @version 1.1.0
+ * @description Creates a canvas based particle system background
+ *
+ * Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/
+ */
+!(function (a, b) {
+  "use strict";
+  function c(a) {
+    a = a || {};
+    for (var b = 1; b < arguments.length; b++) {
+      var c = arguments[b];
+      if (c)
+        for (var d in c)
+          c.hasOwnProperty(d) &&
+            ("object" == typeof c[d] ? deepExtend(a[d], c[d]) : (a[d] = c[d]));
+    }
+    return a;
+  }
+  function d(d, g) {
+    function h() {
+      if (y) {
+        (r = b.createElement("canvas")),
+          (r.className = "pg-canvas"),
+          (r.style.display = "block"),
+          d.insertBefore(r, d.firstChild),
+          (s = r.getContext("2d")),
+          i();
+        for (
+          var c = Math.round((r.width * r.height) / g.density), e = 0;
+          c > e;
+          e++
+        ) {
+          var f = new n();
+          f.setStackPos(e), z.push(f);
+        }
+        a.addEventListener(
+          "resize",
+          function () {
+            k();
+          },
+          !1
+        ),
+          b.addEventListener(
+            "mousemove",
+            function (a) {
+              (A = a.pageX), (B = a.pageY);
+            },
+            !1
+          ),
+          D &&
+            !C &&
+            a.addEventListener(
+              "deviceorientation",
+              function () {
+                (F = Math.min(Math.max(-event.beta, -30), 30)),
+                  (E = Math.min(Math.max(-event.gamma, -30), 30));
+              },
+              !0
+            ),
+          j(),
+          q("onInit");
+      }
+    }
+    function i() {
+      (r.width = d.offsetWidth),
+        (r.height = d.offsetHeight),
+        (s.fillStyle = g.dotColor),
+        (s.strokeStyle = g.lineColor),
+        (s.lineWidth = g.lineWidth);
+    }
+    function j() {
+      if (y) {
+        (u = a.innerWidth),
+          (v = a.innerHeight),
+          s.clearRect(0, 0, r.width, r.height);
+        for (var b = 0; b < z.length; b++) z[b].updatePosition();
+        for (var b = 0; b < z.length; b++) z[b].draw();
+        G || (t = requestAnimationFrame(j));
+      }
+    }
+    function k() {
+      i();
+      for (
+        var a = d.offsetWidth, b = d.offsetHeight, c = z.length - 1;
+        c >= 0;
+        c--
+      )
+        (z[c].position.x > a || z[c].position.y > b) && z.splice(c, 1);
+      var e = Math.round((r.width * r.height) / g.density);
+      if (e > z.length)
+        for (; e > z.length; ) {
+          var f = new n();
+          z.push(f);
+        }
+      else e < z.length && z.splice(e);
+      for (c = z.length - 1; c >= 0; c--) z[c].setStackPos(c);
+    }
+    function l() {
+      G = !0;
+    }
+    function m() {
+      (G = !1), j();
+    }
+    function n() {
+      switch (
+        (this.stackPos,
+        (this.active = !0),
+        (this.layer = Math.ceil(3 * Math.random())),
+        (this.parallaxOffsetX = 0),
+        (this.parallaxOffsetY = 0),
+        (this.position = {
+          x: Math.ceil(Math.random() * r.width),
+          y: Math.ceil(Math.random() * r.height),
+        }),
+        (this.speed = {}),
+        g.directionX)
+      ) {
+        case "left":
+          this.speed.x = +(
+            -g.maxSpeedX +
+            Math.random() * g.maxSpeedX -
+            g.minSpeedX
+          ).toFixed(2);
+          break;
+        case "right":
+          this.speed.x = +(Math.random() * g.maxSpeedX + g.minSpeedX).toFixed(
+            2
+          );
+          break;
+        default:
+          (this.speed.x = +(
+            -g.maxSpeedX / 2 +
+            Math.random() * g.maxSpeedX
+          ).toFixed(2)),
+            (this.speed.x += this.speed.x > 0 ? g.minSpeedX : -g.minSpeedX);
+      }
+      switch (g.directionY) {
+        case "up":
+          this.speed.y = +(
+            -g.maxSpeedY +
+            Math.random() * g.maxSpeedY -
+            g.minSpeedY
+          ).toFixed(2);
+          break;
+        case "down":
+          this.speed.y = +(Math.random() * g.maxSpeedY + g.minSpeedY).toFixed(
+            2
+          );
+          break;
+        default:
+          (this.speed.y = +(
+            -g.maxSpeedY / 2 +
+            Math.random() * g.maxSpeedY
+          ).toFixed(2)),
+            (this.speed.x += this.speed.y > 0 ? g.minSpeedY : -g.minSpeedY);
+      }
+    }
+    function o(a, b) {
+      return b ? void (g[a] = b) : g[a];
+    }
+    function p() {
+      console.log("destroy"),
+        r.parentNode.removeChild(r),
+        q("onDestroy"),
+        f && f(d).removeData("plugin_" + e);
+    }
+    function q(a) {
+      void 0 !== g[a] && g[a].call(d);
+    }
+    var r,
+      s,
+      t,
+      u,
+      v,
+      w,
+      x,
+      y = !!b.createElement("canvas").getContext,
+      z = [],
+      A = 0,
+      B = 0,
+      C = !navigator.userAgent.match(
+        /(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i
+      ),
+      D = !!a.DeviceOrientationEvent,
+      E = 0,
+      F = 0,
+      G = !1;
+    return (
+      (g = c({}, a[e].defaults, g)),
+      (n.prototype.draw = function () {
+        s.beginPath(),
+          s.arc(
+            this.position.x + this.parallaxOffsetX,
+            this.position.y + this.parallaxOffsetY,
+            g.particleRadius / 2,
+            0,
+            2 * Math.PI,
+            !0
+          ),
+          s.closePath(),
+          s.fill(),
+          s.beginPath();
+        for (var a = z.length - 1; a > this.stackPos; a--) {
+          var b = z[a],
+            c = this.position.x - b.position.x,
+            d = this.position.y - b.position.y,
+            e = Math.sqrt(c * c + d * d).toFixed(2);
+          e < g.proximity &&
+            (s.moveTo(
+              this.position.x + this.parallaxOffsetX,
+              this.position.y + this.parallaxOffsetY
+            ),
+            g.curvedLines
+              ? s.quadraticCurveTo(
+                  Math.max(b.position.x, b.position.x),
+                  Math.min(b.position.y, b.position.y),
+                  b.position.x + b.parallaxOffsetX,
+                  b.position.y + b.parallaxOffsetY
+                )
+              : s.lineTo(
+                  b.position.x + b.parallaxOffsetX,
+                  b.position.y + b.parallaxOffsetY
+                ));
+        }
+        s.stroke(), s.closePath();
+      }),
+      (n.prototype.updatePosition = function () {
+        if (g.parallax) {
+          if (D && !C) {
+            var a = (u - 0) / 60;
+            w = (E - -30) * a + 0;
+            var b = (v - 0) / 60;
+            x = (F - -30) * b + 0;
+          } else (w = A), (x = B);
+          (this.parallaxTargX =
+            (w - u / 2) / (g.parallaxMultiplier * this.layer)),
+            (this.parallaxOffsetX +=
+              (this.parallaxTargX - this.parallaxOffsetX) / 10),
+            (this.parallaxTargY =
+              (x - v / 2) / (g.parallaxMultiplier * this.layer)),
+            (this.parallaxOffsetY +=
+              (this.parallaxTargY - this.parallaxOffsetY) / 10);
+        }
+        var c = d.offsetWidth,
+          e = d.offsetHeight;
+        switch (g.directionX) {
+          case "left":
+            this.position.x + this.speed.x + this.parallaxOffsetX < 0 &&
+              (this.position.x = c - this.parallaxOffsetX);
+            break;
+          case "right":
+            this.position.x + this.speed.x + this.parallaxOffsetX > c &&
+              (this.position.x = 0 - this.parallaxOffsetX);
+            break;
+          default:
+            (this.position.x + this.speed.x + this.parallaxOffsetX > c ||
+              this.position.x + this.speed.x + this.parallaxOffsetX < 0) &&
+              (this.speed.x = -this.speed.x);
+        }
+        switch (g.directionY) {
+          case "up":
+            this.position.y + this.speed.y + this.parallaxOffsetY < 0 &&
+              (this.position.y = e - this.parallaxOffsetY);
+            break;
+          case "down":
+            this.position.y + this.speed.y + this.parallaxOffsetY > e &&
+              (this.position.y = 0 - this.parallaxOffsetY);
+            break;
+          default:
+            (this.position.y + this.speed.y + this.parallaxOffsetY > e ||
+              this.position.y + this.speed.y + this.parallaxOffsetY < 0) &&
+              (this.speed.y = -this.speed.y);
+        }
+        (this.position.x += this.speed.x), (this.position.y += this.speed.y);
+      }),
+      (n.prototype.setStackPos = function (a) {
+        this.stackPos = a;
+      }),
+      h(),
+      { option: o, destroy: p, start: m, pause: l }
+    );
+  }
+  var e = "particleground",
+    f = a.jQuery;
+  (a[e] = function (a, b) {
+    return new d(a, b);
+  }),
+    (a[e].defaults = {
+      minSpeedX: 0.1,
+      maxSpeedX: 0.7,
+      minSpeedY: 0.1,
+      maxSpeedY: 0.7,
+      directionX: "center",
+      directionY: "center",
+      density: 1e4,
+      dotColor: "#666666",
+      lineColor: "#666666",
+      particleRadius: 7,
+      lineWidth: 1,
+      curvedLines: !1,
+      proximity: 100,
+      parallax: !0,
+      parallaxMultiplier: 5,
+      onInit: function () {},
+      onDestroy: function () {},
+    }),
+    f &&
+      (f.fn[e] = function (a) {
+        if ("string" == typeof arguments[0]) {
+          var b,
+            c = arguments[0],
+            g = Array.prototype.slice.call(arguments, 1);
+          return (
+            this.each(function () {
+              f.data(this, "plugin_" + e) &&
+                "function" == typeof f.data(this, "plugin_" + e)[c] &&
+                (b = f.data(this, "plugin_" + e)[c].apply(this, g));
+            }),
+            void 0 !== b ? b : this
+          );
+        }
+        return "object" != typeof a && a
+          ? void 0
+          : this.each(function () {
+              f.data(this, "plugin_" + e) ||
+                f.data(this, "plugin_" + e, new d(this, a));
+            });
+      });
+})(window, document),
+  /**
+   * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+   * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+   * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+   * @license: MIT license
+   */ (function () {
+    for (
+      var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0;
+      c < b.length && !window.requestAnimationFrame;
+      ++c
+    )
+      (window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"]),
+        (window.cancelAnimationFrame =
+          window[b[c] + "CancelAnimationFrame"] ||
+          window[b[c] + "CancelRequestAnimationFrame"]);
+    window.requestAnimationFrame ||
+      (window.requestAnimationFrame = function (b) {
+        var c = new Date().getTime(),
+          d = Math.max(0, 16 - (c - a)),
+          e = window.setTimeout(function () {
+            b(c + d);
+          }, d);
+        return (a = c + d), e;
+      }),
+      window.cancelAnimationFrame ||
+        (window.cancelAnimationFrame = function (a) {
+          clearTimeout(a);
+        });
+  })();
+
+particleground(document.getElementById("particles-foreground"), {
+  dotColor: "rgba(255, 255, 255, 1)",
+  lineColor: "rgba(255, 255, 255, 0.05)",
+  minSpeedX: 0.3,
+  maxSpeedX: 0.6,
+  minSpeedY: 0.3,
+  maxSpeedY: 0.6,
+  density: 50000, // One particle every n pixels
+  curvedLines: false,
+  proximity: 250, // How close two dots need to be before they join
+  parallaxMultiplier: 10, // Lower the number is more extreme parallax
+  particleRadius: 4, // Dot size
+});
+
+particleground(document.getElementById("particles-background"), {
+  dotColor: "rgba(255, 255, 255, 0.5)",
+  lineColor: "rgba(255, 255, 255, 0.05)",
+  minSpeedX: 0.075,
+  maxSpeedX: 0.15,
+  minSpeedY: 0.075,
+  maxSpeedY: 0.15,
+  density: 30000, // One particle every n pixels
+  curvedLines: false,
+  proximity: 20, // How close two dots need to be before they join
+  parallaxMultiplier: 20, // Lower the number is more extreme parallax
+  particleRadius: 2, // Dot size
+});
--- a/docs/loading/style.css
+++ b/docs/loading/style.css
@@ -0,0 +1,107 @@
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: "proxima-nova-soft", sans-serif;
+  -webkit-user-select: none;
+  overflow: hidden;
+}
+body .vertical-centered-box {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+body .vertical-centered-box:after {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  margin-right: -0.25em;
+}
+body .vertical-centered-box .content {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  font-size: 0;
+}
+* {
+  transition: all 0.3s;
+}
+body {
+  background: #2c2d44;
+}
+.loader-circle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  margin-left: -60px;
+  margin-top: -60px;
+}
+.loader-line-mask {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 60px;
+  height: 120px;
+  margin-left: -60px;
+  margin-top: -60px;
+  overflow: hidden;
+  transform-origin: 60px 60px;
+  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
+  animation: rotate 1.2s infinite linear;
+}
+.loader-line-mask .loader-line {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+#particles-background,
+#particles-foreground {
+  left: -51%;
+  top: -51%;
+  width: 202%;
+  height: 202%;
+  transform: scale3d(0.5, 0.5, 1);
+}
+#particles-background {
+  background: #2c2d44;
+  background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
+  background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
+  background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.credittext {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  color: white;
+}
--- a/icon.icns
+++ b/icon.icns
--- a/icon.ico
+++ b/icon.ico
--- a/icon.png
+++ b/icon.png
--- a/icon2.png
+++ b/icon2.png
--- a/main.js
+++ b/main.js
@@ -1,197 +1,606 @@
-const { app, Menu, BrowserWindow, dialog } = require("electron");
-const { autoUpdater } = require("electron-updater");
-const isMac = process.platform === "darwin";
-const openAboutWindow = require("about-window").default;
-const isOnline = require("is-online");
-const Store = require("electron-store");
-const store = new Store();
-
-const template = [
-  ...(isMac
-    ? [
-        {
-          label: app.name,
-          submenu: [
-            { role: "about" },
-            { type: "separator" },
-            { role: "services" },
-            { type: "separator" },
-            { role: "hide" },
-            { role: "hideothers" },
-            { role: "unhide" },
-            { type: "separator" },
-            { role: "quit" },
-          ],
-        },
-      ]
-    : []),
-  {
-    label: "Application",
-    submenu: [
-      {
-        label: "About MS Office - Electron",
-        click: () =>
-          openAboutWindow({
-            icon_path:
-              "https://github.com/agam778/MS-Office-Electron/blob/main/icon2.png?raw=true",
-            product_name: "MS Office - Electron",
-            copyright: "Copyright (c) 2021 Agampreet Singh Bajaj",
-            package_json_dir: __dirname,
-            bug_report_url:
-              "https://github.com/agam778/MS-Office-Electron/issues/",
-            bug_link_text: "Report an issue",
-            adjust_window_size: "2",
-            show_close_button: "Close",
-          }),
-      },
-      {
-        label: "Learn More",
-        click: async () => {
-          const { shell } = require("electron");
-          await shell.openExternal(
-            "https://github.com/agam778/MS-Office-Electron"
-          );
-        },
-      },
-      { type: "separator" },
-      {
-        label: "Open Normal version of MS Office",
-        type: "radio",
-        click() {
-          store.set(
-            "enterprise-or-normal",
-            "https://agam778.github.io/MS-Office-Electron/loading"
-          );
-        },
-        checked:
-          store.get("enterprise-or-normal") ===
-          "https://agam778.github.io/MS-Office-Electron/loading",
-      },
-      {
-        label: "Open Enterprise version of MS Office",
-        type: "radio",
-        click() {
-          store.set("enterprise-or-normal", "https://office.com/?auth=2");
-        },
-        checked:
-          store.get("enterprise-or-normal") === "https://office.com/?auth=2",
-      },
-      { type: "separator" },
-      {
-        role: "quit",
-        accelerator: process.platform === "darwin" ? "Ctrl+Q" : "Ctrl+Q",
-      },
-    ],
-  },
-  {
-    label: "Edit",
-    submenu: [
-      { role: "undo" },
-      { role: "redo" },
-      { type: "separator" },
-      { role: "cut" },
-      { role: "copy" },
-      { role: "paste" },
-      ...(isMac
-        ? [
-            { role: "pasteAndMatchStyle" },
-            { role: "delete" },
-            { role: "selectAll" },
-            { type: "separator" },
-            {
-              label: "Speech",
-              submenu: [{ role: "startSpeaking" }, { role: "stopSpeaking" }],
-            },
-          ]
-        : [{ role: "delete" }, { type: "separator" }, { role: "selectAll" }]),
-    ],
-  },
-  {
-    label: "View",
-    submenu: [
-      { role: "reload" },
-      { role: "forceReload" },
-      { type: "separator" },
-      { role: "resetZoom" },
-      {
-        role: "zoomIn",
-        accelerator: process.platform === "darwin" ? "Control+=" : "Control+=",
-      },
-      { role: "zoomOut" },
-      { type: "separator" },
-      { role: "togglefullscreen" },
-    ],
-  },
-  {
-    label: "Window",
-    submenu: [
-      { role: "minimize" },
-      { role: "zoom" },
-      ...(isMac
-        ? [
-            { type: "separator" },
-            { role: "front" },
-            { type: "separator" },
-            { role: "window" },
-          ]
-        : [{ role: "close" }]),
-    ],
-  },
-];
-
-const menu = Menu.buildFromTemplate(template);
-Menu.setApplicationMenu(menu);
-
-function createWindow() {
-  const win = new BrowserWindow({
-    width: 1181,
-    height: 670,
-    icon: "./icon.png",
-    webPreferences: {
-      nodeIntegration: true,
-      devTools: false,
-    },
-  });
-
-  win.loadURL(`${store.get("enterprise-or-normal")}`, {
-    userAgent:
-      "Mozilla/5.0 (x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36",
-  });
-}
-
-app.whenReady().then(createWindow);
-
-app.on("window-all-closed", () => {
-  if (process.platform !== "darwin") {
-    app.quit();
-  }
-});
-
-app.on("activate", () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  }
-});
-
-app.on("ready", function () {
-  isOnline().then((online) => {
-    if (online) {
-      console.log("You are connected to the internet!");
-    } else {
-      const options = {
-        type: "warning",
-        buttons: ["Ok"],
-        defaultId: 2,
-        title: "Warning",
-        message: "You appear to be offline!",
-        detail:
-          "Please check your Internet Connectivity. This app cannot run without an Internet Connection!",
-      };
-
-      dialog.showMessageBox(null, options, (response) => {
-        console.log(response);
-      });
-    }
-  });
-  autoUpdater.checkForUpdatesAndNotify();
-});
+const { app, Menu, BrowserWindow, dialog, shell } = require("electron");
+const { autoUpdater } = require("electron-updater");
+const openAboutWindow = require("about-window").default;
+const checkInternetConnected = require("check-internet-connected");
+const axios = require("axios");
+const ElectronDl = require("electron-dl");
+const contextMenu = require("electron-context-menu");
+const path = require("path");
+const Store = require("electron-store");
+const log = require("electron-log");
+
+const store = new Store();
+
+const isMac = process.platform === "darwin";
+const isWin = process.platform === "win32";
+const isLinux = process.platform === "linux";
+
+const RPC = require("discord-rpc");
+const clientId = "942637872530460742";
+const rpc = new RPC.Client({ transport: "ipc" });
+
+const windowsuseragent =
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36";
+const macuseragent =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36";
+const linuxuseragent =
+  "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36";
+
+log.transports.file.level = "verbose";
+console.log = log.log;
+Object.assign(console, log.functions);
+
+ElectronDl({
+  dlPath: "./downloads",
+  onStarted: (item) => {
+    BrowserWindow.getAllWindows().forEach((window) => {
+      window.setOverlayIcon(
+        __dirname + "/assets/icons/download.png",
+        "Downloading"
+      );
+    });
+    dialog.showMessageBox({
+      type: "info",
+      title: "Downloading File",
+      message: `Downloading "${item.getFilename()}" to "${item.getSavePath()}"`,
+      buttons: ["OK"],
+    });
+  },
+  onCompleted: () => {
+    BrowserWindow.getAllWindows().forEach((window) => {
+      window.setOverlayIcon(
+        __dirname + "/assets/icons/download-success.png",
+        "Download Successful"
+      );
+    });
+    dialog.showMessageBox({
+      type: "info",
+      title: "Download Completed",
+      message: `Downloading Completed! Please check your "Downloads" folder.`,
+      buttons: ["OK"],
+    });
+    setTimeout(() => {
+      BrowserWindow.getAllWindows().forEach((window) => {
+        window.setOverlayIcon(null, "");
+      });
+    }, 7000);
+  },
+  onError: (item) => {
+    dialog.showMessageBox({
+      type: "error",
+      title: "Download failed",
+      message: `Downloading "${item.getFilename()}" failed :(`,
+      buttons: ["OK"],
+    });
+    BrowserWindow.getAllWindows().forEach((window) => {
+      window.setOverlayIcon(
+        __dirname + "/download-fail.png",
+        "Download Failed"
+      );
+    });
+    setTimeout(() => {
+      BrowserWindow.getAllWindows().forEach((window) => {
+        window.setOverlayIcon(null, "");
+      });
+    }, 7000);
+  },
+});
+
+contextMenu({
+  showInspectElement: false,
+  showServices: false,
+});
+
+const menulayout = [
+  ...(isMac
+    ? [
+        {
+          label: app.name,
+          submenu: [
+            { role: "about" },
+            { type: "separator" },
+            { role: "services" },
+            { type: "separator" },
+            { role: "hide" },
+            { role: "hideothers" },
+            { role: "unhide" },
+            { type: "separator" },
+            { role: "quit" },
+          ],
+        },
+      ]
+    : []),
+  {
+    label: "Application",
+    submenu: [
+      {
+        label: "About MS-Office-Electron",
+        click: () =>
+          openAboutWindow({
+            icon_path:
+              "https://raw.githubusercontent.com/agam778/MS-Office-Electron/main/assets/icon.png",
+            product_name: "MS-Office-Electron",
+            copyright:
+              "Copyright (c) 2021-2022 Agampreet Singh\nOffice, the name, website, images/icons\nare the intellectual properties of Microsoft.",
+            package_json_dir: __dirname,
+            bug_report_url:
+              "https://github.com/agam778/Microsoft-Office-Electron/issues/",
+            bug_link_text: "Report an issue",
+            adjust_window_size: "2",
+            show_close_button: "Close",
+          }),
+      },
+      {
+        label: "Check for Updates",
+        click: async () => {
+          axios
+            .get(
+              "https://api.github.com/repos/agam778/MS-Office-Electron/releases/latest"
+            )
+            .then((res) => {
+              let data = res.data;
+              let currentVersion = "v" + app.getVersion();
+              let latestVersion = data.tag_name;
+              if (currentVersion !== latestVersion) {
+                const updatedialog = dialog.showMessageBoxSync({
+                  type: "info",
+                  title: "Update Available",
+                  message: `Your App's version: ${currentVersion}\nLatest version: ${latestVersion}\n\nPlease update to the latest version.`,
+                  buttons: ["Download", "Close"],
+                });
+                if (updatedialog === 0) {
+                  shell.openExternal(
+                    "https://github.com/agam778/MS-Office-Electron/releases/latest"
+                  );
+                }
+              } else {
+                dialog.showMessageBoxSync({
+                  type: "info",
+                  title: "No Update Available",
+                  message: `Your App's version: ${currentVersion}\nLatest version: ${latestVersion}\n\nYou are already using the latest version.`,
+                  buttons: ["OK"],
+                });
+              }
+            });
+        },
+      },
+      {
+        label: "Learn More",
+        click: async () => {
+          const { shell } = require("electron");
+          await shell.openExternal(
+            "https://github.com/agam778/MS-Office-Electron"
+          );
+        },
+      },
+      {
+        label: "Open Logs Folder",
+        click: async () => {
+          const { shell } = require("electron");
+          if (isWin) {
+            await shell.openPath(
+              "C:\\Users\\" +
+                process.env.USERNAME +
+                "\\AppData\\Roaming\\ms-office-electron\\logs\\"
+            );
+          } else if (process.platform === "darwin") {
+            await shell.openPath(
+              "/Users/" + process.env.USER + "/Library/Logs/ms-office-electron/"
+            );
+          } else if (isLinux) {
+            await shell.openPath(
+              "/home/" + process.env.USER + "/.config/ms-office-electron/logs/"
+            );
+          }
+        },
+      },
+      { type: "separator" },
+      {
+        label: "Open Normal version of MS Office",
+        type: "radio",
+        click() {
+          store.set("enterprise-or-normal", "https://office.com/?auth=1");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Normal version of MS Office",
+            message:
+              "The normal version of MS Office will be opened.\n\nPlease restart the app to apply the changes.",
+            buttons: ["OK"],
+          });
+        },
+        checked:
+          store.get("enterprise-or-normal") === "https://office.com/?auth=1",
+      },
+      {
+        label: "Open Enterprise version of MS Office",
+        type: "radio",
+        click() {
+          store.set("enterprise-or-normal", "https://office.com/?auth=2");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Enterprise version of MS Office",
+            message:
+              "The enterprise version of MS Office will be opened.\n\nPlease restart the app to apply the changes.",
+            buttons: ["OK"],
+          });
+        },
+        checked:
+          store.get("enterprise-or-normal") === "https://office.com/?auth=2",
+      },
+      { type: "separator" },
+      {
+        label: "Open Websites in New Windows (Recommended)",
+        type: "radio",
+        click: () => {
+          store.set("websites-in-new-window", "true");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Websites in New Windows",
+            message:
+              "Websites which are targeted to open in new tabs will now open in new windows.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("websites-in-new-window")
+          ? store.get("websites-in-new-window") === "true"
+          : true,
+      },
+      {
+        label: "Open Websites in the Same Window",
+        type: "radio",
+        click: () => {
+          store.set("websites-in-new-window", "false");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Websites in New Windows",
+            message:
+              "Websites which are targeted to open in new tabs will now open in the same window.\n\nNote: This will be buggy in some cases if you are using Enterprise version of MS Office.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("websites-in-new-window")
+          ? store.get("websites-in-new-window") === "false"
+          : false,
+      },
+      { type: "separator" },
+      {
+        label: "Enable Discord Rich Presence",
+        type: "radio",
+        click: () => {
+          store.set("discordrpcstatus", "true");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Discord Rich Presence",
+            message: "Discord Rich Presence is now enabled.",
+            buttons: ["OK"],
+          });
+          discordrpcupdate(
+            `On "${BrowserWindow.getFocusedWindow().webContents.getTitle()}"`
+          );
+        },
+        checked: store.get("discordrpcstatus")
+          ? store.get("discordrpcstatus") === "true"
+          : true,
+      },
+      {
+        label: "Disable Discord Rich Presence",
+        type: "radio",
+        click: () => {
+          store.set("discordrpcstatus", "false");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Discord Rich Presence",
+            message: "Discord Rich Presence is now disabled.",
+            buttons: ["OK"],
+          });
+          rpc.clearActivity();
+        },
+        checked: store.get("discordrpcstatus")
+          ? store.get("discordrpcstatus") === "false"
+          : false,
+      },
+      { type: "separator" },
+      {
+        label: "Windows Useragent",
+        type: "radio",
+        click: () => {
+          store.set("useragentstring", windowsuseragent);
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "User agent switcher",
+            message:
+              "You have switched to Windows Useragent.\n\nPlease restart the app to apply the changes.",
+            buttons: ["OK"],
+          });
+        },
+        checked:
+          store.get("useragentstring") === windowsuseragent ? true : false,
+      },
+      {
+        label: "Mac os Useragent",
+        type: "radio",
+        click: () => {
+          store.set("useragentstring", macuseragent);
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "User agent switcher",
+            message:
+              "You have switched to Mac OS Useragent.\n\nPlease restart the app to apply the changes.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("useragentstring") === macuseragent ? true : false,
+      },
+      {
+        label: "Linux Useragent",
+        type: "radio",
+        click: () => {
+          store.set("useragentstring", linuxuseragent);
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "User agent switcher",
+            message:
+              "You have switched to Linux Useragent.\n\nPlease restart the app to apply the changes.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("useragentstring") === linuxuseragent ? true : false,
+      },
+      { type: "separator" },
+      {
+        role: "quit",
+        accelerator: process.platform === "darwin" ? "Ctrl+Q" : "Ctrl+Q",
+      },
+    ],
+  },
+  {
+    label: "Navigation",
+    submenu: [
+      {
+        label: "Back",
+        click: () => {
+          BrowserWindow.getFocusedWindow().webContents.goBack();
+        },
+      },
+      {
+        label: "Forward",
+        click: () => {
+          BrowserWindow.getFocusedWindow().webContents.goForward();
+        },
+      },
+      {
+        label: "Reload",
+        click: () => {
+          BrowserWindow.getFocusedWindow().webContents.reload();
+        },
+      },
+      {
+        label: "Home",
+        click: () => {
+          BrowserWindow.getFocusedWindow().loadURL(
+            `${store.get("enterprise-or-normal")}`
+          );
+        },
+      },
+    ],
+  },
+  {
+    label: "Edit",
+    submenu: [
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      ...(isMac
+        ? [
+            { role: "pasteAndMatchStyle" },
+            { role: "delete" },
+            { role: "selectAll" },
+            { type: "separator" },
+            {
+              label: "Speech",
+              submenu: [{ role: "startSpeaking" }, { role: "stopSpeaking" }],
+            },
+          ]
+        : [{ role: "delete" }, { type: "separator" }, { role: "selectAll" }]),
+    ],
+  },
+  {
+    label: "View",
+    submenu: [
+      { role: "reload" },
+      { role: "forceReload" },
+      { type: "separator" },
+      { role: "resetZoom" },
+      {
+        role: "zoomIn",
+        accelerator: process.platform === "darwin" ? "Control+=" : "Control+=",
+      },
+      { role: "zoomOut" },
+      { type: "separator" },
+      { role: "togglefullscreen" },
+    ],
+  },
+  {
+    label: "Window",
+    submenu: [
+      { role: "minimize" },
+      { role: "zoom" },
+      ...(isMac
+        ? [
+            { type: "separator" },
+            { role: "front" },
+            { type: "separator" },
+            { role: "window" },
+          ]
+        : [{ role: "close" }]),
+      {
+        label: "Show Menu Bar",
+        type: "radio",
+        click: () => {
+          store.set("autohide-menubar", "false");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Menu Bar Settings",
+            message:
+              "Menu will be visible now. Please restart the app for changes to take effect.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("autohide-menubar") === "false",
+      },
+      {
+        label: "Hide Menu Bar (Press ALT To show for some time)",
+        type: "radio",
+        click: () => {
+          store.set("autohide-menubar", "true");
+          dialog.showMessageBoxSync({
+            type: "info",
+            title: "Menu Bar Settings",
+            message:
+              "Menu bar will be automatically hidden now. Please restart the app for changes to take effect.",
+            buttons: ["OK"],
+          });
+        },
+        checked: store.get("autohide-menubar") === "true",
+      },
+    ],
+  },
+];
+
+const menu = Menu.buildFromTemplate(menulayout);
+Menu.setApplicationMenu(menu);
+
+function discordrpc(title) {
+  if (store.get("discordrpcstatus") === "true") {
+    rpc
+      .setActivity({
+        details: `${title}`,
+        largeImageKey: "logo",
+        largeImageText: "MS-Office-Electron",
+        startTimestamp: Date.now(),
+        instance: false,
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+}
+
+function discordrpcupdate(title) {
+  rpc.clearActivity();
+  rpc
+    .setActivity({
+      details: `${title}`,
+      largeImageKey: "logo",
+      largeImageText: "MS-Office-Electron",
+      startTimestamp: Date.now(),
+      instance: false,
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1181,
+    height: 670,
+    icon: path.join(__dirname, "/assets/icons/png/1024x1024.png"),
+    show: false,
+    webPreferences: {
+      nodeIntegration: true,
+      devTools: true,
+    },
+  });
+
+  if (store.get("autohide-menubar") === "true") {
+    win.setAutoHideMenuBar(true);
+  } else {
+    win.setAutoHideMenuBar(false);
+  }
+
+  const splash = new BrowserWindow({
+    width: 810,
+    height: 610,
+    transparent: true,
+    frame: false,
+    alwaysOnTop: true,
+    icon: path.join(__dirname, "/assets/icons/png/1024x1024.png"),
+  });
+
+  splash.loadURL(`https://agam778.github.io/MS-Office-Electron/loading`);
+  win.loadURL(
+    `${store.get("enterprise-or-normal") || "https://office.com/?auth=1"}`,
+    {
+      userAgent: store.get("useragentstring") || windowsuseragent,
+    }
+  );
+
+  win.webContents.on("did-finish-load", () => {
+    splash.destroy();
+    win.show();
+    discordrpc(`On "${win.webContents.getTitle()}"`);
+  });
+}
+
+app.on("ready", () => {
+  createWindow();
+});
+
+app.on("web-contents-created", (event, contents) => {
+  contents.on("new-window", (event, url) => {
+    if (store.get("websites-in-new-window") === "false") {
+      event.preventDefault();
+      BrowserWindow.getFocusedWindow().loadURL(url);
+    }
+  });
+});
+
+app.on("window-all-closed", () => {
+  rpc.clearActivity();
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
+app.on("ready", function () {
+  checkInternetConnected()
+    .then(() => {
+      console.log("You are connected to the internet!");
+    })
+    .catch(() => {
+      const options = {
+        type: "warning",
+        buttons: ["Ok"],
+        defaultId: 2,
+        title: "Warning",
+        message: "You appear to be offline!",
+        detail:
+          "Please check your Internet Connectivity. This app cannot run without an Internet Connection!",
+      };
+      dialog.showMessageBox(null, options, (response) => {
+        console.log(response);
+      });
+    });
+  autoUpdater.checkForUpdatesAndNotify();
+  if (store.get("discordrpcstatus") === "true") {
+    rpc.login({ clientId }).catch(() =>
+      dialog.showMessageBox(BrowserWindow.getFocusedWindow(), {
+        type: "error",
+        title: "Discord RPC Error",
+        message:
+          "Oops! An Error occured while connecting to Discord RPC. Probably discord isn't installed or opened?",
+        buttons: ["OK"],
+      })
+    );
+  }
+});
--- a/package.json
+++ b/package.json
@@ -1,86 +1,82 @@
-{
-  "name": "ms-office-electron",
-  "version": "0.3.5",
-  "description": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
-  "main": "main.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/agam778/MS-Office-Electron.git"
-  },
-  "build": {
-    "extraFiles": [
-      "Intro Image.png",
-      "icon.png",
-      "icon.ico",
-      "license.txt",
-      "icon2.png"
-    ],
-    "appId": "com.agampreet.ms-office-electron",
-    "productName": "MS-Office-Electron",
-    "linux": {
-      "category": "Office",
-      "desktop": {
-        "Comment": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
-        "Name": "MS Office - Electron",
-        "StartupNotify": "true",
-        "Terminal": "false",
-        "Type": "Application",
-        "Categories": "Office;"
-      },
-      "icon": "icon.png",
-      "artifactName": "MS-Office-Electron-Setup-${version}-x86_64.${ext}",
-      "executableName": "MS-Office-Electron",
-      "maintainer": "Agampreet Singh <agam778@zohomail.in>",
-      "target": [
-        "deb",
-        "rpm",
-        "AppImage"
-      ]
-    },
-    "deb": {
-      "compression": "bzip2"
-    },
-    "mac": {
-      "category": "public.app-category.office",
-      "target": [
-        "dmg"
-      ]
-    },
-    "nsis": {
-      "oneClick": false,
-      "perMachine": false,
-      "allowToChangeInstallationDirectory": false,
-      "license": "license.txt",
-      "artifactName": "MS-Office-Electron-Setup-${version}-x86_64.${ext}"
-    },
-    "win": {
-      "target": [
-        "nsis"
-      ]
-    },
-    "directories": {
-      "output": "release"
-    }
-  },
-  "scripts": {
-    "start": "electron .",
-    "pack": "electron-builder --dir",
-    "dist": "electron-builder"
-  },
-  "author": {
-    "name": "Agampreet Singh",
-    "email": "agam778singh@outlook.com",
-    "url": "https://agam778.is-a.dev/"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "electron": "^15.3.0",
-    "electron-builder": "^22.13.1"
-  },
-  "dependencies": {
-    "about-window": "^1.15.2",
-    "electron-store": "^8.0.1",
-    "electron-updater": "^4.3.9",
-    "is-online": "^9.0.1"
-  }
-}
+{
+  "name": "ms-office-electron",
+  "version": "0.7.3",
+  "description": "An Unofficial Microsoft Office Online Desktop Client. Free of Cost.",
+  "main": "main.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agam778/MS-Office-Electron.git"
+  },
+  "author": {
+    "name": "Agampreet Singh",
+    "email": "agam778@zohomail.in",
+    "url": "https://agam778.is-a.dev/"
+  },
+  "build": {
+    "extraFiles": [
+      "/assets",
+      "LICENSE"
+    ],
+    "appId": "com.agampreet.ms-office-electron",
+    "productName": "MS-Office-Electron",
+    "artifactName": "MS-Office-Electron-Setup-v${version}-${os}-${arch}.${ext}",
+    "mac": {
+      "identity": "null",
+      "category": "public.app-category.office",
+      "target": [
+        "dmg"
+      ],
+      "icon": "./assets/icons/mac/icon.icns"
+    },
+    "win": {
+      "target": [
+        "nsis"
+      ],
+      "icon": "./assets/icons/win/icon.ico"
+    },
+    "nsis": {
+      "oneClick": false,
+      "perMachine": false,
+      "allowToChangeInstallationDirectory": false,
+      "license": "LICENSE"
+    },
+    "linux": {
+      "category": "Office",
+      "icon": "./assets/icons/png",
+      "executableName": "ms-office-electron",
+      "maintainer": "Agampreet Singh <agam778@zohomail.in>",
+      "target": [
+        "snap",
+        "deb",
+        "rpm",
+        "AppImage",
+        "tar.gz"
+      ]
+    },
+    "directories": {
+      "output": "release"
+    }
+  },
+  "scripts": {
+    "start": "electron .",
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "electron": "^21.1.0",
+    "electron-builder": "^23.3.3",
+    "eslint": "^8.24.0"
+  },
+  "dependencies": {
+    "about-window": "^1.15.2",
+    "axios": "^1.1.0",
+    "check-internet-connected": "^2.0.6",
+    "discord-rpc": "^4.0.1",
+    "electron-context-menu": "^3.5.0",
+    "electron-dl": "^3.3.1",
+    "electron-log": "^4.4.8",
+    "electron-store": "^8.1.0",
+    "electron-updater": "^5.2.1"
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock