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

36
js/main.js
View File

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

22
scss/main.scss
View File

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