Removed Unsplash

Removed Unsplash in order to keep everything simple. (Also the load times were too god damn high)
This commit is contained in:
Kukielka 2018-04-16 12:15:00 +02:00
parent 05247c761f
commit b9dfafa3bd
11 changed files with 49 additions and 209 deletions

2
.gitignore vendored
View File

@ -1,2 +1,2 @@
config.json
favicon.ico
favicon.ico

View File

@ -1,32 +1,19 @@
# simple-dash
A simple, fully responsive Dashboard to forward to the services of your choice! Ideal for Desktop and mobile usage!
Based on: https://github.com/thetomester13/homepage
This project uses:
- jQuery
- Bootstrap CSS
- Font Awesome
- Unsplash
- Trianglify
## Screenshots
![Homepage Desktop Trianglify](example_img/homepage-desktop-trianglify.jpg?raw=true)
![Homepage Mobile Trianglify](example_img/homepage-mobile-trianglify.jpg?raw=true)
![Homepage Desktop Unsplash](example_img/homepage-desktop-unsplash.png?raw=true)
![Homepage Mobile Unsplash](example_img/homepage-mobile-unsplash.png?raw=true)
![Homepage Desktop](example_img/homepage-desktop.png?raw=true)
![Homepage Mobile](example_img/homepage-mobile.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.
Copy the config.sample.json file and rename to config.json. Be sure to update the fields as you see appropriate.
## Configure Homepage
- 'items' => The menu will scale to the amount of items you want to display. Insert any link you'd like, or {{cur}} for the current URL of the page. Choose icons from [Font Awesome](http://fontawesome.io/icons/)
### Unsplash Background Images
- 'unsplash_client_id' => Get Unsplash client ID from [Unsplash](https://unsplash.com/developers). Leave this blank if you want to use Trianglify!
- 'credits' => Whether you want to give credits to the artists, or not.
### 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.
- 'items' => The menu will scale to the amount of items you want to display. Insert any link you'd like, or {{cur}} for the current URL of the page. Choose icons from [Font Awesome](http://fontawesome.io/icons/)

View File

@ -1,10 +1,5 @@
{
"title" : "Your Homepage Title",
"credits" : true,
"custom_url" : "",
"custom_url_selector" : "",
"custom_url_headers" : [],
"unsplash_client_id" : "Make yourself an Unsplash Account here: https://unsplash.com/developers (Leave blank for Trianglify)",
"items" : [
{
"alt" : "Github",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 653 KiB

View File

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 233 KiB

View File

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

View File

@ -1,31 +1,20 @@
html {height: 100%; width: 100%;}
body {font-family: sans-serif; 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;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
html {
height: 100%;
background-color: #fff;
opacity: 0;
z-index: 2;
transition: .3s all;
width: 100%;
}
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;}
body {
font-family: sans-serif;
z-index: 1;
height: 100%;
width: 100%;
background-position: center;
background-attachment: fixed;
}
.bg {
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
border-radius: 6px;
background-color: rgba(0, 0, 0, .4);
padding: 20px;
}
@ -35,29 +24,41 @@ body.menu-shown #bg-overlay {opacity: 0.3;}
#links-wrap {
font-size: 80px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding-bottom: 3px;
width: fit-content;
height: auto;
max-width: 75%;
max-width: 80%;
max-height: 85%;
overflow: auto;
display: flex;
}
#links-wrap a {transition: .3s all;}
#links-wrap a:hover {color: #d3d3d3;}
#links-wrap .link {display: inline-block; width: 33%; float: left; text-align: center;}
#links-wrap::-webkit-scrollbar {width: 10px; background-color: transparent;}
#links-wrap::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.4); background-color: rgba(255,255,255,.2);}
#links-wrap a {
transition: .3s all;
}
#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;}
#links-wrap a:hover {
color: #c4c4c4;
}
#links-wrap .link {
display: inline-block;
width: 33%;
float: left;
text-align: center;
}
#links-wrap::-webkit-scrollbar {
width: 10px;
background-color: transparent;
}
#links-wrap::-webkit-scrollbar-thumb {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.4);
background-color: rgba(255,255,255,.2);
}

View File

@ -1,53 +0,0 @@
// Set random background image
function setBgImg() {
var bg = "";
$.getJSON("hp_assets/lib/ajax_get_image.php").done(function(data) {
if (data['success']) {
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']).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
}
}
}
$(function() {
$("#mobile-menu-wrap a").click(function(e) {
e.preventDefault();
});
setBgImg();
});

View File

@ -1,66 +0,0 @@
<?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();
?>

View File

@ -9,6 +9,7 @@
return $protocol . $domainName;
}
?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
@ -24,45 +25,25 @@
</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="links-wrap" class="menu-item bg">
<center><p>
<?php
echo '<center><p>';
foreach ($config['items'] as $i => $item) {
$icon = $item['icon'];
$link = str_replace("{{cur}}", get_current_url(), $item['link']);
echo '<a href="' . $link . '" title="' . $item['alt'] . '"><i class="fa ' . $icon . ' fa-fw"></i></a>';
}
echo '</p></center>';
?>
</p></center>
</div>
<?php
if ($config['credits'] == true) {
echo '<div id="pic-info-wrap" class="menu-item hidden bg">';
echo ' <span id="pic-info">Picture by <a href="#" id="pic-info-url"></a></span>';
echo '</div>';
}
?>
<script type="text/javascript" src="hp_assets/js/jquery.min.js"></script>
<script type="text/javascript" src="hp_assets/js/main.js"></script>
<script src="hp_assets/js/trianglify.min.js"></script>
<script>
function addTriangleTo(target) {
var dimensions = target.getClientRects()[0];
var pattern = Trianglify({
<?php
if ($config['unsplash_client_id'] != "") {
echo 'x_colors: \'Greys\',';
echo 'y_colors: \'match_x\',';
}
?>
width: dimensions.width,
height: dimensions.height
});
@ -74,16 +55,11 @@
}
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
<?php
if ($config['unsplash_client_id'] == "") {
echo 'addTriangleTo(homepage)';
}
?>
}, 400);
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
<?php echo 'addTriangleTo(homepage)'; ?>
}, 400);
});
addTriangleTo(homepage);