kawa/startpage-onedark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changing color palette to onedark, replacing bing with brave search engine, changing timezone and weather location

Browse Source
This commit is contained in:
AbdelrhmanNile
2021-11-10 20:18:01 +02:00
parent 8cad9b0d21
commit 26320c5909
4 changed files with 42 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@@ -1,19 +0,0 @@
<div align="center">
<h1>Minimal Startpage</h1>
<h4>Just another minimal startpage for browsers.</h4>
</div>
<img src=".github/startpage.gif">
<div align="center">
<br>
<img src="https://img.shields.io/badge/Maintained%3F-Yes-blueviolet?style=for-the-badge">
<a href="LICENSE.md"><img src="https://img.shields.io/badge/License-MIT-pink.svg?style=for-the-badge"></a> <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-lightblue.svg?style=for-the-badge"></a> <img src="https://img.shields.io/badge/supports-chrome-lightgreen.svg?style=for-the-badge"> <img src="https://img.shields.io/badge/supports-firefox-orange.svg?style=for-the-badge"><a href="https://www.paypal.me/deepjyoti30" target="_blank"><img alt="undefined" src="https://img.shields.io/badge/paypal-deepjyoti30-blue?style=for-the-badge&logo=paypal"></a>
<a href="https://ko-fi.com/deepjyoti30" target="_blank"><img alt="undefined" src="https://img.shields.io/badge/KoFi-deepjyoti30-red?style=for-the-badge&logo=ko-fi"></a>
<br>
<h3>
<a href="https://github.com/deepjyoti30/startpage/wiki/Installation">Installation</a> | <a href="https://github.com/deepjyoti30/startpage/wiki/Configuration">Configuration</a> | <a href="https://github.com/deepjyoti30/startpage/wiki">Wiki</a>
</h3>
</div>

24
config.json
View File

@@ -1,7 +1,7 @@
{
"squares": [
{ "name": "media",
"color": "red",
"color": "#61afef",
"links": [
{ "name": "Spotify", "url": "https://open.spotify.com/" },
{ "name": "YoutubeMusic", "url": "https://music.youtube.com/" },
@@ -10,7 +10,7 @@
]
},
{ "name": "work",
"color": "#26A69A",
"color": "#e06c75",
"links": [
{ "name": "Github", "url": "https://github.com" },
{ "name": "Heroku", "url": "http://heroku.com/" },
@@ -18,6 +18,7 @@
]
},
{ "name": "social",
"color": "#e5c07b",
"links": [
{ "name": "Reddit", "url": "https://reddit.com" },
{ "name": "Unixporn Love", "url": "https://deepjyoti30.github.io/unixporn-love/" },
@@ -27,6 +28,7 @@
},
{
"name": "Others",
"color": "#98c379",
"links": [
{"name": "Material Colors", "url": "http://materialuicolors.co/"},
{"name": "Gmail", "url": "http://gmail.com/"},
@@ -35,29 +37,29 @@
]
}
],
"searchEngine":"DuckDuckGo",
"user": "Deepjyoti",
"searchEngine":"Brave",
"user": "Pirate",
"disableMessage": false,
"disableDate": false,
"disableSearchBar": false,
"disable24Hour": false,
"disableWeather": true,
"timeZone": "America/Los_Angeles",
"disable24Hour": true,
"disableWeather": false,
"timeZone": "Africa/Cairo",
"weatherConf": {
"location": "Pune India",
"location": "Giza Egypt",
"unit": "cel"
},
"settingsIcon": false,
"style": {
"backgroundColor": "#212121",
"backgroundColor": "#282c34",
"messageColor": "#fff",
"dateColor": "#d9d9d9",
"lineColor": "#fff",
"weatherColor": "#d9d9d9",
"searchColor": "#fff",
"searchBackgroundColor": "#2e2e2e",
"searchBackgroundColor": "#1e222a",
"squareColor": "#9e9e9e",
"squareBackgroundColor": "#2e2e2e",
"squareBackgroundColor": "#1e222a",
"autocompleteHighlightBackgroundColor": "#3B3B3B"
}
}

36
js/main.js
View File

@@ -33,7 +33,7 @@ bgClassContainer = [
searchEngines = {
"Google": "https://www.google.com/search?q=",
"DuckDuckGo": "https://duckduckgo.com/?q=",
"Bing": "https://www.bing.com/search?q=",
"Brave": "https://search.brave.com/search?q=",
"Yahoo": "https://search.yahoo.com/search?p=",
"Ecosia": "https://www.ecosia.org/search?q="
}
@@ -46,7 +46,7 @@ validQuickLinks = {}
function initBody() {
/**
* Function called when the body is loaded.
*
*
* Do everything like adding an event listener to
* other things.
*/
@@ -71,7 +71,7 @@ function initSearchBar(jsonData) {
searchEngine = "Google"
}
searchUrl = this.searchEngines[searchEngine]
document.getElementById(searchBarId).placeholder = `Search something on ${searchEngine}`
document.getElementById(searchBarId).placeholder = `${searchEngine} Search`
document.getElementById(searchBarId).addEventListener("keypress", (event) => {
if (event.key != 'Enter') return
@@ -96,7 +96,7 @@ function initSearchBar(jsonData) {
function buildMsg() {
/**
* Build a nice message for the user.
*
*
* Following is how the message would be decided.
* 0 - 5:59 : It's too late, take some sleep
* 6 - 8:59 : You're up early
@@ -129,7 +129,7 @@ function buildMsg() {
function handleMessage(userName) {
/**
* Handle the creation of the message
*
*
* Build the message based on the time of the day.
* If the message is null then add just the username
* Else, add the username before the message.
@@ -357,10 +357,10 @@ function createSqr(sqrData, index) {
function getTitle(titleContent, linkHref=null) {
/**
* Create the title for the sqr card.
*
*
* The card will be optionally clicable and will open
* a new link.
*
*
* If the link is not passed in the config then the title
* will not be clickable.
*/
@@ -413,7 +413,7 @@ function inRange(number, min, max) {
function isColorValid(color) {
/**
* Check if the passed color is valid.
*
*
* Currently supports only css color names
* or hex colors having 3 or 6 characters.
*/
@@ -430,12 +430,12 @@ function createClass(color) {
/**
* Create a new class in a style and add it to
* the head.
*
*
* I did check other alternatives since adding something like
* this in the innerHTML is not a preferred way to go,
* especially since I'm building this as an extension,
* however, there's no other way.
*
* however, there's no other way.
*
* Since I also want to add hover effects, there seriously
* is no other way to do that without adding a style or using
* a library (cannot/don't want to do that because this is an extension).
@@ -452,7 +452,7 @@ function createClass(color) {
function createPlaceholderStyleClass(color) {
/**
* Create a new class with for placeholder styling.
*
*
* This is pretty much a continuation of what has done preivously
* in the createClass function.
*/
@@ -463,11 +463,11 @@ function createPlaceholderStyleClass(color) {
color: ${color} !important;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: ${color} !important;
}
::-ms-input-placeholder { /* Microsoft Edge */color: ${color} !important;}`;
document.getElementsByTagName('head')[0].appendChild(style);
@@ -498,7 +498,7 @@ function addAutocompleteStyleClass(color) {
function extractQuickLinks(passedSqrs, style) {
/**
* Extract the quicklinks passed in the config
*
*
* Cache the quicklinks passed by the user in the config JSON
* so that they can be used as a shortcut called from the
* search bar.
@@ -526,10 +526,10 @@ function listenForSettings() {
function enableCog() {
/**
* Enable the settings cog.
*
*
* It will be disabled by default, however, if the user
* wishes to enable it through the config, it will be shown.
*
*
* Once shown, we need to add some event listeners to it as
* well so it works the right way.
*/
@@ -548,4 +548,4 @@ function enableCog() {
hideSettings(editor);
}
}
}
}

22
scss/main.scss
View File

@@ -1,12 +1,12 @@
$background: #212121;
$foreground: #fff;
$background: #282c34;
$foreground: #abb2bf;
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
$media: #4DD0E1;
$work: #F06292;
$social: #FFF176;
$others: #81C784;
$funky: #4DB6AC;
$purple: #9575CD;
$media: #61afef;
$work: #e06c75;
$social: #e5c07b;
$others: #98c379;
$funky: #56b6c2;
$purple: #c678dd;
$upvoty: #FF8A65;
$indigo: #7986CB;
$foxxy: #A1887F;
@@ -188,7 +188,7 @@ body {
h4, a:hover {
color: $social;
}
}
.others {
@@ -267,10 +267,10 @@ body {
right: 25px;
transition: 2s ease-in;
display: none;
&:hover .cog {
fill: white;
stroke: white;
transition: 2s ease-in;
}
}
}