diff --git a/.config/startpages/homepage/assets/ico/coffee-48x48.svg b/.config/startpages/homepage/assets/ico/coffee-48x48.svg new file mode 100644 index 0000000..c5b0c84 --- /dev/null +++ b/.config/startpages/homepage/assets/ico/coffee-48x48.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.config/startpages/homepage/assets/ico/coffee-96x96.svg b/.config/startpages/homepage/assets/ico/coffee-96x96.svg new file mode 100644 index 0000000..d01f8a8 --- /dev/null +++ b/.config/startpages/homepage/assets/ico/coffee-96x96.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.config/startpages/homepage/assets/img/avatar.png b/.config/startpages/homepage/assets/img/avatar.png new file mode 100644 index 0000000..15199ec Binary files /dev/null and b/.config/startpages/homepage/assets/img/avatar.png differ diff --git a/.config/startpages/homepage/index.html b/.config/startpages/homepage/index.html new file mode 100755 index 0000000..b147eac --- /dev/null +++ b/.config/startpages/homepage/index.html @@ -0,0 +1,74 @@ + + + + + + + + Home page + + + +
+ + + + +
+ Your Avatar +

+ +

+ + + + + + diff --git a/.config/startpages/homepage/js/script.js b/.config/startpages/homepage/js/script.js new file mode 100755 index 0000000..cedce58 --- /dev/null +++ b/.config/startpages/homepage/js/script.js @@ -0,0 +1,8 @@ +const username = "Diego"; +const determineGreet = hours => document.getElementById("greeting").innerText = `Good ${hours < 12 ? "Morning, " : hours < 18 ? "Afternoon, " : "Evening, "}` + username + '.'; + +window.addEventListener('load', () => { + let today = new Date(); + determineGreet(new Date().getHours()); + setTimeout(() => { document.getElementById("greeting").style.opacity = "1"; }, 100); +}); diff --git a/.config/startpages/homepage/js/search.js b/.config/startpages/homepage/js/search.js new file mode 100644 index 0000000..7d41c8f --- /dev/null +++ b/.config/startpages/homepage/js/search.js @@ -0,0 +1,130 @@ +let input = document.getElementById("input"); +let form = document.getElementById("search-bar"); +let indicator = document.getElementById("search-engine-indicator"); + +// Available search engines to cycle through +let search_engines = ["Google", "DuckDuckGo", "Github", "StackOverflow", "Reddit"]; + +const MIN_SEARCH_ENGINE_INDEX = 0; +const MAX_SEARCH_ENGINE_INDEX = search_engines.length - 1; +let search_engine_index = 0; + +// Search function: Gets called on 'Enter' keypress +// and depending on which search engine is currently selected +function duckduckgo_search(str) { + if (str !== "") { + search_query = "https://duckduckgo.com/?q=" + str; + window.location.replace(search_query); + } +} + +// Search function: Gets called on 'Enter' keypress +// and depending on which search engine is currently selected +function google_search(str) { + if (str !== "") { + search_query = "https://www.google.com/search?q=" + str; + window.location.replace(search_query); + } +} + +// Search function: Gets called on 'Enter' keypress +// and depending on which search engine is currently selected +function github_search(str) { + if (str !== "") { + search_query = "https://github.com/search?q=" + str; + window.location.replace(search_query); + } +} + +// Search function: Gets called on 'Enter' keypress +// and depending on which search engine is currently selected +function reddit_search(str) { + if (str !== "") { + search_query = "https://www.reddit.com/search/?q=" + str; + window.location.replace(search_query); + } +} + +// Search function: Gets called on 'Enter' keypress +// and depending on which search engine is currently selected +function stackoverflow_search(str) { + if (str !== "") { + search_query = "https://stackoverflow.com/search?q=" + str; + window.location.replace(search_query); + } +} + +// Search function: Gets called on 'Enter' keypress +// and depending on which search engine is currently selected +form.addEventListener("submit", (event) => { + event.preventDefault(); +}); + +input.addEventListener("keypress", function (event) { + if (event.key == 'Enter') { + search_engine_index == 0 ? google_search(input.value) + : search_engine_index == 1 ? duckduckgo_search(input.value) + : search_engine_index == 2 ? github_search(input.value) + : search_engine_index == 3 ? stackoverflow_search(input.value) + : reddit_search(input.value) + input.blur(); + } +}); + + +document.addEventListener("keypress", function (event) { + switch (event.key) { + // Focus on the search bar when pressing 's' + case 's': + if (document.activeElement !== input) + input.focus(); + break; + // Switch to next search engine when pressing 'j' + case 'j': + if ((search_engine_index < MAX_SEARCH_ENGINE_INDEX) && (document.activeElement !== input)) { + search_engine_index++; + indicator.innerHTML = "Searching with " + search_engines[search_engine_index]; + // Show the search engine indicator for + // 1.5 seconds and then hide it + indicator.style.opacity = "1"; + setTimeout(() => { + indicator.style.opacity = "0"; + }, 1500); + } + break; + // Switch to previous search engine when pressing 'k' + case 'k': + if ((search_engine_index > MIN_SEARCH_ENGINE_INDEX) && (document.activeElement !== input)) { + search_engine_index--; + indicator.innerHTML = "Searching with " + search_engines[search_engine_index]; + // Show the search engine indicator for + // 1.5 seconds and then hide it + indicator.style.opacity = "1"; + setTimeout(() => { + indicator.style.opacity = "0"; + }, 1500); + } + break; + // Display current search engine when pressing '?' + case '?': + if (document.activeElement !== input) { + indicator.innerHTML = "Searching with " + search_engines[search_engine_index]; + // Show the search engine indicator for + // 1.5 seconds and then hide it + indicator.style.opacity = "1"; + setTimeout(() => { + indicator.style.opacity = "0"; + }, 1500); + } + break; + default: + return; + } +}); + +// Remove focus from the search bar when pressing 'Escape' +document.addEventListener("keydown", function (event) { + if (event.key == "Escape") { + input.blur(); + } +}); diff --git a/.config/startpages/homepage/manifest.json b/.config/startpages/homepage/manifest.json new file mode 100644 index 0000000..2eef672 --- /dev/null +++ b/.config/startpages/homepage/manifest.json @@ -0,0 +1,17 @@ +{ + "manifest_version": 2, + "name": "Gruvypage", + "version": "1.0.0", + "description": "New Tab Startpage", + "chrome_url_overrides": { + "newtab": "index.html" + }, + "icons": { + "48": "assets/ico/coffee-48x48.svg", + "96": "assets/ico/coffee-48x48.svg" + }, + "content_security_policy": "script-src 'self'; object-src 'self';", + "web_accessible_resources": [ + "assets/img/avatar.png" + ] +} \ No newline at end of file diff --git a/.config/startpages/homepage/style.css b/.config/startpages/homepage/style.css new file mode 100755 index 0000000..98ef0d1 --- /dev/null +++ b/.config/startpages/homepage/style.css @@ -0,0 +1,139 @@ +* { + font-family: 'Hack Nerd Font Mono', monospace; +} + +body { + background-color: #101010; + -moz-user-select: none; + user-select: none; +} + +.container { + display: flex; + width: max-content; + justify-content: center; + margin: auto; +} + +/* Uncomment for space between buttons */ +/* .container > * { margin: 0 0 0 10px; } */ + +#input { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + min-width: 35%; + height: 40px; + font-size: 120%; + text-align: center; + outline: none; + background-color: #252525; + border: 1px solid #252525; + color: #f7f7f7; + transition: border-color .4s; +} + +#input:hover { + border-color: #252525; +} + +#input:focus { + border-color: #252525; +} + +#avatar { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 150px; + width: 128px; + height: 128px; + border-radius:50%; + border: 2px solid #252525; +} + +#greeting { + font-size: 210%; + opacity: 0; + color: #f7f7f7; + margin: auto; + margin-top: 40px; + width: 50%; + text-align: center; + transition: opacity ease-in .1s; +} + +.dropbtn { + background-color: #252525; + color: #f7f7f7; + width: 150px; + border: none; + padding: 10px; + font-size: 12px; + outline: none; + cursor: pointer; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #252525; + min-width: 160px; + box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.3); + z-index: 1; + transition: opacity ease-in-out 1s; + transition-delay: 2000ms; +} + +.dropdown-content a { + display: block; + text-decoration: none; + color: #f7f7f7; + padding: 12px 16px; + font-size: 13px; +} + +.dropdown-content a:hover { + background-color: #454545; +} + +.dropdown:hover .dropdown-content { + display: block; + height: auto; +} + +.dropdown:hover .dropbtn { + border-bottom: solid 1px #f7f7f7; + color: #f7f7f7; + transition: color .3s; +} + +#search-engine-indicator { + display: block; + justify-content: center; + margin: auto; + text-align: center; + font-size: 110%; + transform: translateY(60px); + color: #f7f7f7; + opacity: 0; + transition: opacity ease-in-out .2s; +} + +hr { + display: block; + justify-content: center; + margin-top: 0; + margin-bottom: 0; + width: 135px; + padding: 0; + border: none; + height: 1px; + background-color: #f7f7f7; +}