initial import

CONTRIBUTING.md

@@ -0,0 +1,172 @@
+# Contributing to Homepage
+
+Looking to contribute something to Homepage? **Here's how you can help.**
+
+Please take a moment to review this document in order to make the contribution
+process easy and effective for everyone involved.
+
+Following these guidelines helps to communicate that you respect the time of
+the developers managing and developing this open source project. In return,
+they should reciprocate that respect in addressing your issue or assessing
+patches and features.
+
+
+## Using the issue tracker
+
+The [issue tracker](https://github.com/thetomester13/homepage/issues) is
+the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
+and [submitting pull requests](#pull-requests), but please respect the following
+restrictions:
+
+* Please **do not** derail or troll issues. Keep the discussion on topic and
+  respect the opinions of others.
+
+## Issues and labels
+
+Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
+
+- `bug` - Issues for a potential bug in Homepage. 
+- `docs` - Issues for improving or updating our documentation.
+- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified.
+- `help wanted` - Issues we need or would love help from the community to resolve.
+- `question` - General purpose question about Homepage. 
+
+For a complete look at our labels, see the [project labels page](https://github.com/thetomester13/homepage/labels).
+
+
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository.
+Good bug reports are extremely helpful, so thanks!
+
+Guidelines for bug reports:
+
+0. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu)
+   and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
+   problem isn't caused by a simple error in your own code.
+
+1. **Use the GitHub issue search** — check if the issue has already been
+   reported.
+
+2. **Check if the issue has been fixed** — try to reproduce it using the
+   latest `master` or development branch in the repository.
+
+3. **Isolate the problem** — ideally create a live example.
+   [This jsfiddle](http://jsfiddle.net/) is a helpful tools. 
+
+
+A good bug report shouldn't leave others needing to chase you up for more
+information. Please try to be as detailed as possible in your report. What is
+your environment? What steps will reproduce the issue? What browser(s) and OS
+experience the problem? Do other browsers show the bug differently? What
+would you expect to be the outcome? All these details will help people to fix
+any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+
+## Feature requests
+
+Feature requests are welcome. But take a moment to find out whether your idea
+fits with the scope and aims of the project. It's up to *you* to make a strong
+case to convince the project's developers of the merits of this feature. Please
+provide as much detail and context as possible.
+
+
+## Pull requests
+
+Good pull requests—patches, improvements, new features—are a fantastic
+help. They should remain focused in scope and avoid containing unrelated
+commits.
+
+**Please ask first** before embarking on any significant pull request (e.g.
+implementing features, refactoring code, porting to a different language),
+otherwise you risk spending a lot of time working on something that the
+project's developers might not want to merge into the project.
+
+Please adhere to the [coding guidelines](#code-guidelines) used throughout the
+project (indentation, accurate comments, etc.) and any other requirements
+(such as test coverage).
+
+Adhering to the following process is the best way to get your work
+included in the project:
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork,
+   and configure the remotes:
+
+   ```bash
+   # Clone your fork of the repo into the current directory
+   git clone https://github.com/<your-username>/homepage.git
+   # Navigate to the newly cloned directory
+   cd homepage
+   # Assign the original repo to a remote called "upstream"
+   git remote add upstream https://github.com/thetomester13/homepage.git
+   ```
+
+2. If you cloned a while ago, get the latest changes from upstream:
+
+   ```bash
+   git checkout master
+   git pull upstream master
+   ```
+
+3. Create a new topic branch (off the main project development branch) to
+   contain your feature, change, or fix:
+
+   ```bash
+   git checkout -b <topic-branch-name>
+   ```
+
+4. Commit your changes in logical chunks. Please adhere to these [git commit
+   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+   or your code is unlikely be merged into the main project. Use Git's
+   [interactive rebase](https://help.github.com/articles/about-git-rebase/)
+   feature to tidy up your commits before making them public.
+
+5. Locally merge (or rebase) the upstream development branch into your topic branch:
+
+   ```bash
+   git pull [--rebase] upstream master
+   ```
+
+6. Push your topic branch up to your fork:
+
+   ```bash
+   git push origin <topic-branch-name>
+   ```
+
+7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+    with a clear title and description against the `master` branch.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
+license your work under the terms of the [MIT License](LICENSE.md) (if it
+includes code changes).
+
+
+## Code guidelines
+
+- Readability
+- Need semicolons
+- strict mode
+- "Attractive"
+
+
+## License
+
+By contributing your code, you agree to license your contribution under the [MIT License](LICENSE.md).

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Tomer Shvueli
+
+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.

README.md

@@ -0,0 +1,46 @@
+# Homepage
+
+[![Mentioned in Awesome Selfhosted](https://awesome.re/mentioned-badge.svg)](https://github.com/Kickball/awesome-selfhosted#personal-dashboards)
+
+This project is a simple, standalone, self-hosted PHP page that is meant to be your window to your server and the web. 
+
+It is your minimalist corner of the internet. The background will update with a gorgeous (and royalty free) image from [Unsplash](https://unsplash.com/), or a custom source every 20 seconds. With it, a simple menu is available to you with your most frequented links. 
+
+All the assets needed are part of the repo so it can run offline (though it won't fetch pretty background images for you). 
+
+This project uses:
+- Apache
+- PHP and PHP cURL
+- jQuery
+- Bootstrap CSS
+- Mousetrap.js
+- Font Awesome
+- Unsplash
+
+## Screenshots
+Homepage w/o Menu:
+![Homepage w/o Menu](example_img/homepage-wo-menu.png?raw=true)
+
+Homepage with Menu Toggled:
+![Homepage with Menu](example_img/homepage-w-menu.png?raw=true)
+
+
+## To Use
+Copy the config.sample.json file and rename to config.json. Be sure to update the fields as you see appropriate. You have the option to use the Unsplash API to fetch background images, or use a custom URL and JSON selector. If you choose to use Unsplash, will need to create a developer profile at [Unsplash](https://unsplash.com/) to use the background image functionality properly. 
+
+## Configure Homepage
+- 'unlock_pattern' => Choose unlock pattern from [Mousetrap](https://craig.is/killing/mice)
+- 'clock_format' => Choose pattern format from [PHP's date function](http://php.net/manual/en/function.date.php)
+- 'time_to_refresh_bg' => Time, in milliseconds, until it will fetch the next background image
+- 'idle_timer' => Set a number of milliseconds here if you'd like to automatically hide the menu after a certain time of inactivity. Leave this attribute out entirely if you don't want an idle timer. 
+- 'items' => The menu will be in a grid of 3 icons per row on desktop. Insert any link you'd like, or {{cur}} for the current URL of the page. Choose icons from [Font Awesome](http://fontawesome.io/icons/)
+
+__NOTE__: PHP cURL is required for fetching external images.
+
+### Unsplash Background Images
+- 'unsplash_client_id' => Get Unsplash client ID from [Unsplash](https://unsplash.com/developers)
+
+### Custom Background Images
+- 'custom_url' => Input a custom URL that will return proper JSON
+- 'custom_url_headers' => Add any headers that may be needed to complete a cURL request to the aforementioned URL properly
+- 'custom_url_selector' => Input a proper PHP array selector to be used on the JSON received above. For example, if I were to fetch from Github's user API with a 'custom_url' of 'https://api.github.com/users/octocat', the 'custom_url_selector' would simply be "['avatar_url']". [{random}] can be replaced for a random index in an array. 

config.sample.json

@@ -0,0 +1,43 @@
+{
+  "title" : "My Homepage",
+  "unlock_pattern" : "space",
+  "clock_format" : "H:i j/n/Y",
+  "custom_url" : "",
+  "custom_url_selector" : "",
+  "custom_url_headers" : [],
+  "unsplash_client_id" : "",
+  "time_to_refresh_bg" : 20000,
+  "idle_timer" : 60000,
+  "items" : [
+    {
+      "alt" : "Facebook",
+      "icon" : "facebook",
+      "link" : "http://facebook.com"
+    },
+    {
+      "alt" : "Twitter",
+      "icon" : "twitter",
+      "link" : "http://twitter.com"
+    },
+    {
+      "alt" : "Trello",
+      "icon" : "trello",
+      "link" : "http://trello.com"
+    },
+    {
+      "alt" : "TTRSS",
+      "icon" : "rss",
+      "link" : "{{cur}}/ttrss"
+    },
+    {
+      "alt" : "phpMyAdmin",
+      "icon" : "database",
+      "link" : "{{cur}}:3306/phpMyAdmin"
+    },
+    {
+      "alt" : "Plex",
+      "icon" : "film",
+      "link" : "{{cur}}:32400/web/"
+    }
+  ]
+}

error/400.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 400 - Bad Request!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status4xx">
+            <h1>ERROR 400 - Bad Request!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>You have used invalid syntax.</p>
+			<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

error/401.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 401 - Unauthorized!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status4xx">
+            <h1>ERROR 401 - Unauthorized!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>The URL requested requires authorisation.</p>
+			<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

error/403.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 403 - Forbidden!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status4xx">
+            <h1>ERROR 403 - Forbidden!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>You are not permitted to access the requested URL.</p>
+			<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

error/404.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 404 - Not Found!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status4xx">
+            <h1>ERROR 404 - Not Found!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>The requested URL was not found on this server.</p>
+			<P>Please check the URL or contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//-->.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

error/405.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 405 - Method Not Allowed!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status4xx">
+            <h1>ERROR 405 - Method Not Allowed!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>The method used is not permitted.</p>
+			<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

error/500.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 500 - Internal Server Error!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status5xx">
+            <h1>ERROR 500 - Internal Server Error!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>The requested URL caused an internal server error.</p>
+			<P>If you get this message repeatedly please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//-->.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

error/502.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 502 - Bad Gateway!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status5xx">
+            <h1>ERROR 502 - Bad Gateway!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>This server received an invalid response from an upstream server it accessed to fulfill the request.</p>
+			<P>If you get this message repeatedly please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//-->.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

error/503.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <title>ERROR 503 - Service Unavailable!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="noindex" />
+    <style type="text/css"><!--
+    body {
+        color: #444444;
+        background-color: #EEEEEE;
+        font-family: 'Trebuchet MS', sans-serif;
+        font-size: 80%;
+    }
+    h1 {}
+    h2 { font-size: 1.2em; }
+    #page{
+        background-color: #FFFFFF;
+        width: 60%;
+        margin: 24px auto;
+        padding: 12px;
+    }
+    #header {
+        padding: 6px ;
+        text-align: center;
+    }
+    .status3xx { background-color: #475076; color: #FFFFFF; }
+    .status4xx { background-color: #C55042; color: #FFFFFF; }
+    .status5xx { background-color: #F2E81A; color: #000000; }
+    #content {
+        padding: 4px 0 24px 0;
+    }
+    #footer {
+        color: #666666;
+        background: #f9f9f9;
+        padding: 10px 20px;
+        border-top: 5px #efefef solid;
+        font-size: 0.8em;
+        text-align: center;
+    }
+    #footer a {
+        color: #999999;
+    }
+    --></style>
+</head>
+<body>
+    <div id="page">
+        <div id="header" class="status5xx">
+            <h1>ERROR 503 - Service Unavailable!</h1>
+        </div>
+        <div id="content">
+            <h2>The following error occurred:</h2>
+            <p>The Service is not available at the moment due to a temporary overloading or maintenance of the server. Please try again later.</p>
+			<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
+        </div>
+        <div id="footer">
+            <p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
+        </div>
+    </div>
+</body>
+</html>

hp_assets/css/main.css

@@ -0,0 +1,31 @@
+html {height: 100%; width: 100%;}
+body {font-family: sans-serif; background: url("../img/sayagata-400px.png") repeat; z-index: 1; height: 100%; width: 100%; background-position: center; background-attachment: fixed;}
+
+.hidden {display: none;}
+.menu-item {display: none; z-index: 3;}
+
+#bg-overlay {position: fixed; width: 100%; height: 100%; background-color: #fff; opacity: 0; z-index: 2; transition: .3s all;}
+body.menu-shown #bg-overlay {opacity: 0.3;}
+
+#mobile-menu-wrap {z-index: 3; position: absolute; top: 15px; left: 15px;}
+#mobile-menu-wrap a {font-size: 20px; padding: 20px 20px 20px 24px; display: block; color: #fff;}
+#mobile-menu-wrap a:hover {color: #fff;}
+
+.bg {border-radius: 5px; background-color: rgba(0, 0, 0, .5); padding: 20px;}
+.bg a {color: #fff;}
+
+#links-wrap {font-size: 70px; width: 50%; height: 50%; margin: 25% auto 0; overflow: hidden; padding: 50px; position: relative; overflow-y: scroll;}
+#links-wrap a {transition: .3s all;}
+#links-wrap a:hover {color: #00AB00;}
+#links-wrap .link {display: inline-block; float: left; text-align: center;}
+
+#pic-info-wrap {color: #fff; font-size: 16px; position: absolute; bottom: 15px; left: 15px;}
+#pic-info-wrap a:hover, #pic-info-wrap a:active {color: #fff; text-decoration: none;}
+
+#clock-wrap {color: #fff; font-size: 20px; position: absolute; top: 15px; right: 15px;}
+
+@media (min-width: 992px) {
+  #links-wrap {margin-top: 15%; height: auto; font-size: 80px;}
+
+  #clock-wrap {font-size: 30px;}
+}

hp_assets/js/main.js

@@ -0,0 +1,169 @@
+var menuHidden = true;
+var randBgTimer = null;
+
+// Simulates PHP's date function - http://jacwright.com/projects/javascript/date_format/
+Date.prototype.format=function(e){var t="";var n=Date.replaceChars;for(var r=0;r<e.length;r++){var i=e.charAt(r);if(r-1>=0&&e.charAt(r-1)=="\\"){t+=i}else if(n[i]){t+=n[i].call(this)}else if(i!="\\"){t+=i}}return t};Date.replaceChars={shortMonths:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],longMonths:["January","February","March","April","May","June","July","August","September","October","November","December"],shortDays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],longDays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],d:function(){return(this.getDate()<10?"0":"")+this.getDate()},D:function(){return Date.replaceChars.shortDays[this.getDay()]},j:function(){return this.getDate()},l:function(){return Date.replaceChars.longDays[this.getDay()]},N:function(){return this.getDay()+1},S:function(){return this.getDate()%10==1&&this.getDate()!=11?"st":this.getDate()%10==2&&this.getDate()!=12?"nd":this.getDate()%10==3&&this.getDate()!=13?"rd":"th"},w:function(){return this.getDay()},z:function(){var e=new Date(this.getFullYear(),0,1);return Math.ceil((this-e)/864e5)},W:function(){var e=new Date(this.getFullYear(),0,1);return Math.ceil(((this-e)/864e5+e.getDay()+1)/7)},F:function(){return Date.replaceChars.longMonths[this.getMonth()]},m:function(){return(this.getMonth()<9?"0":"")+(this.getMonth()+1)},M:function(){return Date.replaceChars.shortMonths[this.getMonth()]},n:function(){return this.getMonth()+1},t:function(){var e=new Date;return(new Date(e.getFullYear(),e.getMonth(),0)).getDate()},L:function(){var e=this.getFullYear();return e%400==0||e%100!=0&&e%4==0},o:function(){var e=new Date(this.valueOf());e.setDate(e.getDate()-(this.getDay()+6)%7+3);return e.getFullYear()},Y:function(){return this.getFullYear()},y:function(){return(""+this.getFullYear()).substr(2)},a:function(){return this.getHours()<12?"am":"pm"},A:function(){return this.getHours()<12?"AM":"PM"},B:function(){return Math.floor(((this.getUTCHours()+1)%24+this.getUTCMinutes()/60+this.getUTCSeconds()/3600)*1e3/24)},g:function(){return this.getHours()%12||12},G:function(){return this.getHours()},h:function(){return((this.getHours()%12||12)<10?"0":"")+(this.getHours()%12||12)},H:function(){return(this.getHours()<10?"0":"")+this.getHours()},i:function(){return(this.getMinutes()<10?"0":"")+this.getMinutes()},s:function(){return(this.getSeconds()<10?"0":"")+this.getSeconds()},u:function(){var e=this.getMilliseconds();return(e<10?"00":e<100?"0":"")+e},e:function(){return"Not Yet Supported"},I:function(){var e=null;for(var t=0;t<12;++t){var n=new Date(this.getFullYear(),t,1);var r=n.getTimezoneOffset();if(e===null)e=r;else if(r<e){e=r;break}else if(r>e)break}return this.getTimezoneOffset()==e|0},O:function(){return(-this.getTimezoneOffset()<0?"-":"+")+(Math.abs(this.getTimezoneOffset()/60)<10?"0":"")+Math.abs(this.getTimezoneOffset()/60)+"00"},P:function(){return(-this.getTimezoneOffset()<0?"-":"+")+(Math.abs(this.getTimezoneOffset()/60)<10?"0":"")+Math.abs(this.getTimezoneOffset()/60)+":00"},T:function(){var e=this.getMonth();this.setMonth(0);var t=this.toTimeString().replace(/^.+ \(?([^\)]+)\)?$/,"$1");this.setMonth(e);return t},Z:function(){return-this.getTimezoneOffset()*60},c:function(){return this.format("Y-m-d\\TH:i:sP")},r:function(){return this.toString()},U:function(){return this.getTime()/1e3}}
+
+Mousetrap.bind($.config.unlock_pattern, function() {
+  toggleMenu();
+});
+
+Mousetrap.bind('esc', function() {
+  setMenuVisibility(false);
+});
+
+Mousetrap.bind('r', function() {
+  clearTimeout(randBgTimer);
+  setBgImg();
+  setTimeout(setBgImg, $.config.time_to_refresh_bg);
+});
+
+Mousetrap.bind('1', function() {
+  if (!menuHidden) {
+    var link = $(".link:eq(0) a").attr("href");
+    window.location = link;
+  }
+});
+
+Mousetrap.bind('2', function() {
+  if (!menuHidden) {
+    var link = $(".link:eq(1) a").attr("href");
+    window.location = link;
+  }
+});
+
+Mousetrap.bind('3', function() {
+  if (!menuHidden) {
+    var link = $(".link:eq(2) a").attr("href");
+    window.location = link;
+  }
+});
+
+Mousetrap.bind('4', function() {
+  if (!menuHidden) {
+    var link = $(".link:eq(3) a").attr("href");
+    window.location = link;
+  }
+});
+
+Mousetrap.bind('5', function() {
+  if (!menuHidden) {
+    var link = $(".link:eq(4) a").attr("href");
+    window.location = link;
+  }
+});
+
+Mousetrap.bind('6', function() {
+  if (!menuHidden) {
+    var link = $(".link:eq(5) a").attr("href");
+    window.location = link;
+  }
+});
+
+function toggleMenu() {
+  if (menuHidden) {
+    setMenuVisibility(true);
+  } else {
+    setMenuVisibility(false);
+  }
+}
+
+function setMenuVisibility(visible) {
+  if (visible) {
+    $(".menu-item").fadeIn();
+    $("body").addClass("menu-shown");
+    menuHidden = false;
+  } else {
+    $(".menu-item").fadeOut();
+    $("body").removeClass("menu-shown");
+    menuHidden = true;
+  }
+}
+
+// Set random background image
+function setBgImg() {
+  var bg = "";
+
+  $.getJSON("hp_assets/lib/ajax_get_image.php").done(function(data) {
+    if (data['success']) {
+      let unsplashUtmPostfix = "?utm_source=homepage&utm_medium=referral";
+
+      bg = data['url'];
+      if (bg != "" && bg != null) {
+        preloadimages([bg]).done(function(images) {
+          $("#homepage").css("background-image", "url(" + bg + ")").css("background-size", "cover");
+          $("#pic-info-wrap").removeClass("hidden");
+          $("#pic-info-url").attr("href", `${data['image_user_url']}${unsplashUtmPostfix}`).text(data['image_user_name']);
+        });
+      }
+    }
+  });
+}
+
+// http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
+function preloadimages(arr){
+  var newimages=[], loadedimages=0
+  var postaction=function(){}
+  var arr=(typeof arr!="object")? [arr] : arr
+  function imageloadpost(){
+    loadedimages++
+    if (loadedimages==arr.length){
+      postaction(newimages) //call postaction and pass in newimages array as parameter
+    }
+  }
+  for (var i=0; i<arr.length; i++){
+    newimages[i]=new Image()
+    newimages[i].src=arr[i]
+    newimages[i].onload=function(){
+        imageloadpost()
+    }
+    newimages[i].onerror=function(){
+      imageloadpost()
+    }
+  }
+  return { //return blank object with done() method
+    done:function(f){
+      postaction=f || postaction //remember user defined callback functions to be called when images load
+    }
+  }
+}
+
+if ($.config.idle_timer) {
+  var inactivityTime = function () {
+    var t;
+    window.onload = resetTimer;
+    document.onmousemove = resetTimer;
+    document.onkeypress  = resetTimer;
+    document.onmousedown = resetTimer;
+
+    function hideMenu() {
+      setMenuVisibility(false);
+    }
+
+    function resetTimer() {
+      clearTimeout(t);
+      t = setTimeout(hideMenu, $.config.idle_timer)
+    }
+  };
+
+  inactivityTime();
+}
+
+// Update the clock
+function updateClock () {
+  // Update the time display
+  document.getElementById("clock").textContent = new Date().format($.config.clock_format);
+}
+
+$(function() {
+  $("#mobile-menu-wrap a").click(function(e) {
+    e.preventDefault();
+    toggleMenu();
+  });
+
+  setBgImg();
+  randBgTimer = setInterval(setBgImg, $.config.time_to_refresh_bg);
+
+  updateClock();
+  setInterval('updateClock()', 5000);
+});

hp_assets/js/mousetrap.min.js

@@ -0,0 +1,11 @@
+/* mousetrap v1.5.2 craig.is/killing/mice */
+(function(C,r,g){function t(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function x(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return l[a.which]?l[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function u(a){return"shift"==a||"ctrl"==a||"alt"==a||
+"meta"==a}function y(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],z[c]&&(c=z[c]),b&&"keypress"!=b&&A[c]&&(c=A[c],g.push("shift")),u(c)&&g.push(c);h=c;e=b;if(!e){if(!k){k={};for(var m in l)95<m&&112>m||l.hasOwnProperty(m)&&(k[l[m]]=m)}e=k[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function B(a,b){return a===r?!1:a===b?!0:B(a.parentNode,b)}function c(a){function b(a){a=a||{};
+var b=!1,n;for(n in q)a[n]?b=!0:q[n]=0;b||(v=!1)}function h(a,b,n,f,c,h){var g,e,l=[],m=n.type;if(!d._callbacks[a])return[];"keyup"==m&&u(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||q[e.seq]==e.level)&&m==e.action){var k;(k="keypress"==m&&!n.metaKey&&!n.ctrlKey)||(k=e.modifiers,k=b.sort().join(",")===k.sort().join(","));k&&(k=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||k)&&d._callbacks[a].splice(g,1),l.push(e))}return l}function g(a,b,n,f){d.stopCallback(b,b.target||
+b.srcElement,n,f)||!1!==a(b,n)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=x(a);b&&("keyup"==a.type&&w===b?w=!1:d.handleKey(b,D(a),a))}function l(a,c,n,f){function e(c){return function(){v=c;++q[a];clearTimeout(k);k=setTimeout(b,1E3)}}function h(c){g(n,c,a);"keyup"!==f&&(w=x(c));setTimeout(b,10)}for(var d=q[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||y(c[d+1]).action);
+m(c[d],p,f,a,d)}}function m(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?l(a,g,b,c):(c=y(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||r;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var q={},k,w=!1,p=!1,v=!1;d._handleKey=function(a,c,e){var f=h(a,
+c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=v||u(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)m(a[d],b,c)};t(a,"keypress",e);t(a,"keydown",e);t(a,"keyup",e)}var l={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",18:"alt",20:"capslock",
+27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},A={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},z={option:"alt",command:"meta","return":"enter",escape:"esc",
+plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},k;for(g=1;20>g;++g)l[111+g]="f"+g;for(g=0;9>=g;++g)l[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap={};return this};
+c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||B(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.init=function(){var a=c(r),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};c.init();C.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=c);"function"===
+typeof define&&define.amd&&define(function(){return c})})(window,document);

hp_assets/lib/ajax_get_image.php

@@ -0,0 +1,66 @@
+<?php
+
+  // AJAX call to fetch a new background image
+
+  // http://stackoverflow.com/a/24707821 => use instead of file_get_contents for external URL's
+  function curl_get_contents($url, $headers = null) {
+    $ch = curl_init();
+
+    curl_setopt($ch, CURLOPT_HEADER, 0);
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+    curl_setopt($ch, CURLOPT_URL, $url);
+
+    // Include potential headers with request
+    if (!empty($headers)) {
+      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+    }
+
+    $data = curl_exec($ch);
+    curl_close($ch);
+
+    return $data;
+  }
+
+  // Traverse a JSON object given a string selector
+  function traverse_json($json, $selector) {
+    $regex = "\[\'?([{}a-z0-9_]+)\'?\]";
+    preg_match_all('/' . $regex . '/i', $selector, $matches);
+
+    // Go through each regex match and traverse the JSON object given the keys
+    $obj = $json;
+    foreach ($matches[1] as $i => $match) {
+      if ($match == '{random}' && is_array($obj)) {
+        // Let's fetch a random index of the array
+        $rand = rand(0, count($obj));
+        $obj  = $obj[$rand];
+      } else {
+        // Keep traversing the object
+        $obj = $obj[$match];
+      }
+    }
+
+    return $obj;
+  }
+
+  $config = json_decode(file_get_contents(dirname(__FILE__) . "/../../config.json"), true);
+
+  if (!empty($config['custom_url'])) {
+    // We're fetching from a custom URL
+    $json      = json_decode(curl_get_contents($config['custom_url'], $config['custom_url_headers']), true);
+    $image_url = traverse_json($json, $config['custom_url_selector']);
+
+    echo json_encode(array('success' => 1, 'url' => $image_url));
+  } else if (!empty($config['unsplash_client_id'])) {
+    // We're fetching from Unsplash's API
+    $url             = "https://api.unsplash.com/photos/random?per_page=1&client_id=" . $config['unsplash_client_id'];
+    $json            = json_decode(curl_get_contents($url), true);
+    $image_url       = $json['urls']['regular'];
+    $image_user_name = $json['user']['name'];
+    $image_user_url  = $json['user']['links']['html'];
+
+    echo json_encode(array('success' => 1, 'url' => $image_url, 'image_user_name' => $image_user_name, 'image_user_url' => $image_user_url));
+  }
+
+  die();
+
+?>

image.php

@@ -0,0 +1,24 @@
+[
+ "https://img00.deviantart.net/db3a/i/2017/305/8/7/day_249_of_my_2016_a_drawing_every_day_resolution_by_shonechacko-dags8fy.jpg",
+ "https://img00.deviantart.net/399f/i/2016/275/1/a/day_275_of_my_2016_a_drawing_every_day_resolution_by_shonechacko-dajp572.jpg",
+ "https://img00.deviantart.net/7303/i/2016/237/0/e/day_236_of_my_2016_a_drawing_every_day_resolution_by_shonechacko-daf7cer.jpg",
+ "https://img00.deviantart.net/c796/i/2016/275/8/7/day_274_of_my_2016_a_drawing_every_day_resolution_by_shonechacko-dajkjmp.jpg",
+"https://img00.deviantart.net/bcc9/i/2018/264/2/1/le_sentinelle__2__by_davidmnr-dcndth2.jpg",
+"https://img00.deviantart.net/b775/i/2018/215/a/9/bambi_by_davidmnr-dcii17b.jpg",
+"https://pre00.deviantart.net/1b9a/th/pre/f/2018/262/9/d/trees__silhouettes_ii_by_pajunen-dcn93xh.jpg",
+"https://pre00.deviantart.net/bc19/th/pre/f/2018/255/e/6/house_by_the_river_v_by_pajunen-dcmodtw.jpg",
+"https://pre00.deviantart.net/d4be/th/pre/f/2018/227/e/1/the_final_curtain_by_pajunen-dck8oyx.jpg",
+"https://pre00.deviantart.net/11f6/th/pre/f/2018/263/2/1/213ae6799d3670463c65e23fe081610b-dcnbx5p.jpg",
+"https://img00.deviantart.net/80b1/i/2018/261/e/9/end_of_summer__by_davidmnr-dcn5dxi.jpg",
+"https://img00.deviantart.net/7553/i/2018/260/8/e/g_u_l_l_f_o_s_s_3_by_citizenfresh-dcn2k6g.jpg",
+"https://img00.deviantart.net/b2e9/i/2018/250/7/5/great_wide_open_v4_by_hannes_flo-dcm97ch.jpg",
+"https://pre00.deviantart.net/dba1/th/pre/f/2018/262/2/b/the_lonely_sea_by_cormocodran15-dcn8c9k.jpg",
+"https://img00.deviantart.net/3591/i/2018/259/7/2/guardian_of_mist_by_onodrim_photography-dcmzaf4.jpg",
+"https://pre00.deviantart.net/c5ce/th/pre/i/2018/260/9/7/vesper_creek_looking_towards_morningstar_peak_by_pnwdronetography-dcn301s.jpg",
+"https://pre00.deviantart.net/8496/th/pre/f/2018/258/4/f/winding_wild_by_jonathanjessup-dcmz1ml.jpg",
+"https://img00.deviantart.net/2ba8/i/2018/262/e/1/lelik_by_bastet_mrr-dcn8eg2.jpg",
+"https://orig00.deviantart.net/da8b/f/2018/262/c/c/oblicza_i_by_rosaarvensis-dcn6o6f.jpg"
+
+ ]
+
+

index.php

@@ -0,0 +1,65 @@
+<?php
+  /**
+  * homepage
+  */
+
+  $default_config = array("time_to_refresh_bg" => 20000); // Make sure that we at least always have a value for this
+  $config_file = json_decode(file_get_contents("config.json"), true);
+  $config = array_merge($default_config, $config_file);
+
+  function get_current_url() {
+    $protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
+    $domainName = $_SERVER['SERVER_NAME'];
+    return $protocol . $domainName;
+  }
+
+?>
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+      <title><?= $config['title']; ?></title>
+
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+
+      <link rel="stylesheet" type="text/css" href="hp_assets/css/font-awesome.min.css" />
+      <link rel="stylesheet" type="text/css" href="hp_assets/css/bootstrap.min.css" />
+      <link rel="stylesheet" type="text/css" href="hp_assets/css/main.css" />
+      <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
+  </head>
+
+  <body id="homepage">
+    <div id="bg-overlay">&nbsp;</div>
+    <!-- Line below is to preload the font when the page loads -->
+    <span class="fa fa-asterisk" style="opacity: 0;">&nbsp;</span>
+
+    <div id="mobile-menu-wrap" class="hidden-lg">
+      <a href="#" class="bg "><span class="fa fa-bars">&nbsp;</span></a>
+    </div>
+
+    <div id="clock-wrap" class="menu-item bg">
+      <span id="clock"></span>
+    </div>
+
+    <div id="links-wrap" class="menu-item bg">
+      <?php
+        foreach ($config['items'] as $i => $item) {
+          $icon = $item['icon'];
+          $link = str_replace("{{cur}}", get_current_url(), $item['link']);
+
+          echo '<div class="link col-md-4 col-xs-12"><a href="' . $link . '" title="' . $item['alt'] . '"><i class="fa fa-' . $icon . '"></i></a></div>';
+        }
+      ?>
+    </div>
+
+    <div id="pic-info-wrap" class="menu-item hidden bg">
+      <span id="pic-info" class="hidden">Picture by <a href="#" id="pic-info-url"></a> / <a href="https://unsplash.com/?utm_source=homepage&amp;utm_medium=referral">Unsplash</a></span>
+    </div>
+
+    <script type="text/javascript" src="hp_assets/js/jquery.min.js"></script>
+    <script type="text/javascript" src="hp_assets/js/mousetrap.min.js"></script>
+    <script type="text/javascript">
+      $.config = <?= json_encode($config); ?>;
+    </script>
+    <script type="text/javascript" src="hp_assets/js/main.js"></script>
+  </body>
+</html>

robots.txt

@@ -0,0 +1 @@
+User-agent: *