Uploading a new custom startpage
This commit is contained in:
diego castillo salazar
parent
42eb0472d3
commit
562941fb3b
8 changed files with 370 additions and 0 deletions
1
.config/startpages/homepage/assets/ico/coffee-48x48.svg
Normal file
1
.config/startpages/homepage/assets/ico/coffee-48x48.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>
|
||||
|
After Width: | Height: | Size: 442 B |
1
.config/startpages/homepage/assets/ico/coffee-96x96.svg
Normal file
1
.config/startpages/homepage/assets/ico/coffee-96x96.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>
|
||||
|
After Width: | Height: | Size: 442 B |
BIN
.config/startpages/homepage/assets/img/avatar.png
Normal file
BIN
.config/startpages/homepage/assets/img/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
74
.config/startpages/homepage/index.html
Executable file
74
.config/startpages/homepage/index.html
Executable file
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Home page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Work</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://www.ramajudicial.gov.co/portal/inicio">Rama Judicial</a>
|
||||
<hr>
|
||||
<a href="https://www.ramajudicial.gov.co/directorio-cuentas-de-correo-electronico">Correos electrónicos</a>
|
||||
<hr>
|
||||
<a href="https://www.ramajudicial.gov.co/consulta-procesos">Consulta de procesos</a>
|
||||
<hr>
|
||||
<a href="https://www.ramajudicial.gov.co/consulta-de-jurisprudencia-altas-cortes">Jurisprudencia Cortes</a>
|
||||
<hr>
|
||||
<a href="https://www.ramajudicial.gov.co/consulta-de-jurisprudencia-tribunales">Jurisprudencia Tribunales</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Utilities</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://drive.google.com/drive/folders/1xVIVArl1b7b_bcW4DYlWzdSgfE_ZAqsb">Google Drive</a>
|
||||
<hr>
|
||||
<a href="https://www.ilovepdf.com/">IlovePDF</a>
|
||||
<hr>
|
||||
<a href="https://www.iloveimg.com/">IloveIMG</a>
|
||||
<hr>
|
||||
<a href="https://www.canva.com/">Canva</a>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Emails</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://www.gmx.es/">Gmx</a>
|
||||
<hr>
|
||||
<a href="https://mail.google.com/mail/u/0/#inbox">Gmail</a>
|
||||
<hr>
|
||||
<a href="https://account.proton.me/login">Proton mail</a>
|
||||
<hr>
|
||||
<a href="https://outlook.live.com/owa/">Outlook</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Random</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://web.telegram.org/z/">Telegram</a>
|
||||
<hr>
|
||||
<a href="https://www.reddit.com/">Reddit</a>
|
||||
<hr>
|
||||
<a href="https://web.whatsapp.com/">Whatsapp</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img id="avatar" src="assets/img/avatar.png" alt="Your Avatar" data-tooltip="That's you!">
|
||||
<h1 id="greeting"></h1>
|
||||
<form id="search-bar" name="search-bar">
|
||||
<input type="text" id="input" name="input" autocomplete="off" title="Press 'S' to focus!"><br>
|
||||
</form>
|
||||
<p id="search-engine-indicator"></p>
|
||||
<script async type="text/javascript" src="js/script.js"></script>
|
||||
<script async type="text/javascript" src="js/search.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
8
.config/startpages/homepage/js/script.js
Executable file
8
.config/startpages/homepage/js/script.js
Executable file
|
|
@ -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);
|
||||
});
|
||||
130
.config/startpages/homepage/js/search.js
Normal file
130
.config/startpages/homepage/js/search.js
Normal file
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
17
.config/startpages/homepage/manifest.json
Normal file
17
.config/startpages/homepage/manifest.json
Normal file
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
139
.config/startpages/homepage/style.css
Executable file
139
.config/startpages/homepage/style.css
Executable file
|
|
@ -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;
|
||||
}
|
||||
Reference in a new issue