aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKukielka <kukielka58@gmail.com>2018-04-16 12:15:00 +0200
committerKukielka <kukielka58@gmail.com>2018-04-16 12:15:00 +0200
commitb9dfafa3bdf2783d8a790c20473e910bd9217d4d (patch)
treec7cb1a935c89a8bc11327a07933193fa5862bbbe
parent05247c761f12d490073534875eae7571c87f6d13 (diff)
downloadsimple-dash-fork-b9dfafa3bdf2783d8a790c20473e910bd9217d4d.zip
Removed Unsplash
Removed Unsplash in order to keep everything simple. (Also the load times were too god damn high)
-rw-r--r--.gitignore2
-rw-r--r--README.md21
-rw-r--r--config.sample.json5
-rw-r--r--example_img/homepage-desktop-unsplash.pngbin668844 -> 0 bytes
-rw-r--r--example_img/homepage-desktop.jpg (renamed from example_img/homepage-desktop-trianglify.jpg)bin132976 -> 132976 bytes
-rw-r--r--example_img/homepage-mobile-unsplash.pngbin239045 -> 0 bytes
-rw-r--r--example_img/homepage-mobile.jpg (renamed from example_img/homepage-mobile-trianglify.jpg)bin45197 -> 45197 bytes
-rw-r--r--hp_assets/css/main.css73
-rw-r--r--hp_assets/js/main.js53
-rw-r--r--hp_assets/lib/ajax_get_image.php66
-rw-r--r--index.php38
11 files changed, 49 insertions, 209 deletions
diff --git a/.gitignore b/.gitignore
index 3bb92bd..1bd4ca0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
config.json
-favicon.ico
+favicon.ico \ No newline at end of file
diff --git a/README.md b/README.md
index 6f98e88..f2a81f4 100644
--- a/README.md
+++ b/README.md
@@ -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/) \ No newline at end of file
diff --git a/config.sample.json b/config.sample.json
index ef541c7..a37e237 100644
--- a/config.sample.json
+++ b/config.sample.json
@@ -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",
diff --git a/example_img/homepage-desktop-unsplash.png b/example_img/homepage-desktop-unsplash.png
deleted file mode 100644
index 8a5b9e1..0000000
--- a/example_img/homepage-desktop-unsplash.png
+++ /dev/null
Binary files differ
diff --git a/example_img/homepage-desktop-trianglify.jpg b/example_img/homepage-desktop.jpg
index 85a1bad..85a1bad 100644
--- a/example_img/homepage-desktop-trianglify.jpg
+++ b/example_img/homepage-desktop.jpg
Binary files differ
diff --git a/example_img/homepage-mobile-unsplash.png b/example_img/homepage-mobile-unsplash.png
deleted file mode 100644
index ed836b0..0000000
--- a/example_img/homepage-mobile-unsplash.png
+++ /dev/null
Binary files differ
diff --git a/example_img/homepage-mobile-trianglify.jpg b/example_img/homepage-mobile.jpg
index d98f8f7..d98f8f7 100644
--- a/example_img/homepage-mobile-trianglify.jpg
+++ b/example_img/homepage-mobile.jpg
Binary files differ
diff --git a/hp_assets/css/main.css b/hp_assets/css/main.css
index 62bc0ff..a1ef7e3 100644
--- a/hp_assets/css/main.css
+++ b/hp_assets/css/main.css
@@ -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;
+}
+
+#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;
+}
-#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::-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);
+} \ No newline at end of file
diff --git a/hp_assets/js/main.js b/hp_assets/js/main.js
deleted file mode 100644
index a9d62c3..0000000
--- a/hp_assets/js/main.js
+++ /dev/null
@@ -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();
-});
diff --git a/hp_assets/lib/ajax_get_image.php b/hp_assets/lib/ajax_get_image.php
deleted file mode 100644
index 7910619..0000000
--- a/hp_assets/lib/ajax_get_image.php
+++ /dev/null
@@ -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();
-
-?> \ No newline at end of file
diff --git a/index.php b/index.php
index fc1651e..8bdf315 100644
--- a/index.php
+++ b/index.php
@@ -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);