update format index.html
This commit is contained in:
Javier
parent
63c59e4af8
commit
bdb0b51b23
|
|
@ -0,0 +1,188 @@
|
|||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
@font-face {
|
||||
font-family: 'WorkSans-SemiBold';
|
||||
src: url("../fonts/WorkSans-SemiBold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SpaceMono-Bold';
|
||||
src: url("../fonts/SpaceMono-Bold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SpaceMono-Regular';
|
||||
src: url("../fonts/SpaceMono-Regular.ttf");
|
||||
}
|
||||
|
||||
header {
|
||||
color: #757575;
|
||||
font-family: 'SpaceMono-Bold';
|
||||
font-size: 50px;
|
||||
-webkit-text-fill-color: #757575;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
p1 {
|
||||
font-family: 'SpaceMono-Regular';
|
||||
-webkit-text-fill-color: #757575;
|
||||
font-size: 17px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
p2 {
|
||||
font-family: 'SpaceMono-Regular';
|
||||
-webkit-text-fill-color: #757575;
|
||||
font-size: 12px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
form {
|
||||
background-color: #363636;
|
||||
width: 25%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: unset;
|
||||
font: 16px 'SpaceMono-regular';
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
border-top-style: hidden;
|
||||
border-right-style: hidden;
|
||||
border-left-style: hidden;
|
||||
border-bottom-style: hidden;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #757575;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: #fff;
|
||||
fill: currentColor;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #B5B5B5;
|
||||
}
|
||||
|
||||
.buttontext {
|
||||
color: #757575;
|
||||
font-family: 'SpaceMono-regular';
|
||||
}
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #757575;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-family: 'SpaceMono-regular';
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #B5B5B5;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-family: 'SpaceMono-regular';
|
||||
}
|
||||
|
||||
.button[id = "twitch"]:hover{
|
||||
border: none;
|
||||
background: none;
|
||||
color: #b48ead;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-family: 'SpaceMono-regular';
|
||||
}
|
||||
|
||||
.button[id = "youtube"]:hover{
|
||||
border: none;
|
||||
background: none;
|
||||
color: #bf616a;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-family: 'SpaceMono-regular';
|
||||
}
|
||||
|
||||
.button[id = "twitter"]:hover{
|
||||
border: none;
|
||||
background: none;
|
||||
color: #81a1c1;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-family: 'SpaceMono-regular';
|
||||
}
|
||||
|
||||
a {color: inherit; }
|
||||
|
||||
.outer {
|
||||
display: table;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.middle {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
/*whatever width you want*/
|
||||
}
|
||||
|
||||
#clock {
|
||||
width: 100%;
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
font-family: 'WorkSans-SemiBold';
|
||||
color: #757575;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: fixed ;
|
||||
left: 0 ;
|
||||
bottom: 0 ;
|
||||
z-index:0;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// JavaScript Document
|
||||
|
||||
// Real Time Clock (not yet working)
|
||||
function realTimeClock() {
|
||||
|
||||
var clock = new Date();
|
||||
|
||||
var hours = clock.getHours();
|
||||
var minutes = clock.getMinutes();
|
||||
var seconds = clock.getSeconds();
|
||||
|
||||
// am or pm?
|
||||
var tod = ( hours < 12 ) ? "am" : "pm";
|
||||
|
||||
// convert to 12 hour format
|
||||
hours = ( hours > 12 ) ? hours - 12: hours;
|
||||
|
||||
// padding to make it look a bit nicer
|
||||
hours = ("0" + hours).slice(-2);
|
||||
minutes = ("0" + minutes).slice(-2);
|
||||
seconds = ("0" + seconds).slice(-2);
|
||||
|
||||
// actually show the clock
|
||||
document.getElementById('clock').innerHTML = hours + " : " + minutes;
|
||||
document.getElementById('ampm').innerHTML = tod;
|
||||
var t = setTimeout( realTimeClock, 500 );
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# Minimal Startpage
|
||||
So here's my startpage! It's pretty simple but I like it that way!
|
||||
I was aiming for a more functional and non-flashy site, and I think it turned out just fine!
|
||||
|
||||
|
||||
|
||||
|
||||
As far as hosting it goes, you can run it locally from the html file, or get it hosted by something like GitHub Pages or a Raspberry Pi!
|
||||
|
||||
I'll probably update it every once in a while if I feel like adding more features or fixing bugs, but for now I think it'll be just fine. If you have any issues with it feel free to let me know and I'll see how I can help!
|
||||
|
||||
Anyways, thanks for taking a look- I hope it helps you get a bit more organized!
|
||||
-Simon
|
||||
BIN
bookmark.png
BIN
bookmark.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
171
css/sidebar.css
171
css/sidebar.css
|
|
@ -1,171 +0,0 @@
|
|||
.sidebar-wrapper {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
right: -300px;
|
||||
transition: box-shadow 1s, right .6s ease-in-out;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background: var(--background);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.show-sidebar {
|
||||
right: 0;
|
||||
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.sidebar__settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--foreground);
|
||||
width: 100%;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
.sidebar h4 {font-size: 13px;}
|
||||
|
||||
.sidebar h3 {
|
||||
font-size: 15px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.sidebar__input {
|
||||
width: 100%;
|
||||
border-color: transparent;
|
||||
margin: 5px 0 20px 0;
|
||||
}
|
||||
|
||||
.sidebar__input:hover {border: 2px solid var(--accent);}
|
||||
|
||||
.sidebar__input:focus {
|
||||
color: var(--accent);
|
||||
border: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.sidebar__input:focus::placeholder {
|
||||
color: var(--accent);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.sidebar__button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar__button {
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
padding: 7px 5px;
|
||||
border-radius: 3px;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.sidebar__button:hover {
|
||||
filter: brightness(.75);
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.sidebar__button:active {transform: translateY(0px);}
|
||||
|
||||
.sidebar__radio {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
padding-left: 25px;
|
||||
margin: 0 20px 20px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.control input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.control__indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: var(--input);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.control:hover input ~ .control__indicator,
|
||||
.control input:checked ~ .control__indicator,
|
||||
.control input:focus ~ .control__indicator {background: var(--accent);}
|
||||
|
||||
.control__indicator::after {
|
||||
box-sizing: unset;
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control input:checked ~ .control__indicator::after {display: block;}
|
||||
|
||||
.control-radio .control__indicator {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.control-radio .control__indicator::after {
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
background: var(--input);
|
||||
border: 2px solid transparent;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
transition: .3s;
|
||||
margin: 5px 0 20px 0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="color"]:hover,
|
||||
input[type="color"]:focus {border: 2px solid var(--accent);}
|
||||
|
||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
input[type=color]::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
286
css/style.css
286
css/style.css
|
|
@ -1,286 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&family=IBM+Plex+Mono&display=swap');
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
|
||||
|
||||
@import url('../css/sidebar.css');
|
||||
|
||||
:root {
|
||||
--ubuntu: 'Ubuntu', sans-serif;
|
||||
--roboto: 'Roboto', sans-serif;
|
||||
--ibm-mono: 'IBM Plex Mono', monospace;
|
||||
|
||||
--inactive-icon: #BDBDBD;
|
||||
--theme-icon: #ffd37b;
|
||||
--header-icon: #7ebebd;
|
||||
--menu-icon: #dd7c85;
|
||||
}
|
||||
|
||||
[theme="light"] {
|
||||
--background: #1d2021;
|
||||
--foreground: #91949c;
|
||||
--accent: #81A1C1;
|
||||
--input: #212125;
|
||||
}
|
||||
|
||||
[theme="dark"] {
|
||||
--background: #1d2021;
|
||||
--foreground: #91949c;
|
||||
--accent: #81A1C1;
|
||||
--input: #212125;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: var(--ubuntu);
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 60px;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
transition: all .5s, background-color .8s;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto 1fr;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 25px;
|
||||
font-size: 50px;
|
||||
text-decoration: none;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.big-icons {
|
||||
margin: 40px;
|
||||
font-size: 65px;
|
||||
}
|
||||
|
||||
.small-icons {
|
||||
margin: 20px;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.main a:hover {
|
||||
color: var(--accent);
|
||||
transform: scale(1.2);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
align-self: end;
|
||||
text-align: center;
|
||||
color: var(--foreground);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
transition: all .2s, margin .5s ease;
|
||||
}
|
||||
|
||||
.header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 444px;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
background: var(--accent);
|
||||
margin: 0px 0px 0px -222px;
|
||||
opacity: .5;
|
||||
border-radius: 10px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.header__weather,
|
||||
.header__greeting {
|
||||
margin-bottom: 25px;
|
||||
transition: opacity .5s ease;
|
||||
}
|
||||
|
||||
.hide-header-elements {
|
||||
opacity: 0;
|
||||
transition: opacity 0s;
|
||||
}
|
||||
|
||||
.header__greeting-name,
|
||||
.header__weather-temp {color: var(--accent);}
|
||||
|
||||
.search-form {
|
||||
position: absolute;
|
||||
bottom: -33px;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 450px;
|
||||
margin: 0px 0px 0px -225px;
|
||||
transition: opacity .2s ease-out;
|
||||
}
|
||||
|
||||
.show-search {
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease-in;
|
||||
}
|
||||
|
||||
.search-form__input {
|
||||
border: 2px solid transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-form__input:hover,
|
||||
.search-form__input:focus {
|
||||
border: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.search-form__button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
color: var(--foreground);
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
outline: none;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 0px 3px 3px 0px;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.search-form__button:hover {
|
||||
background: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.header h1{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 20px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.big {
|
||||
margin: 30px;
|
||||
font-size: 55px;
|
||||
}
|
||||
|
||||
.header::after {
|
||||
width: 344px;
|
||||
margin: 0px 0px 0px -172px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
width: 350px;
|
||||
margin: 0px 0px 0px -175px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 15px;
|
||||
left: -45px;
|
||||
|
||||
}
|
||||
|
||||
.btn_theme,
|
||||
.btn_header,
|
||||
.btn_menu {padding: 5px 0;}
|
||||
|
||||
.btn_theme {transform: rotate(-25deg);}
|
||||
|
||||
#chb_theme,
|
||||
#chb_header,
|
||||
#chb_menu {display: none;}
|
||||
|
||||
#chb_theme + label::before,
|
||||
#chb_theme + label:hover::before,
|
||||
#chb_theme:checked + label::before,
|
||||
#chb_theme:checked + label:hover::before,
|
||||
#chb_header + label::before,
|
||||
#chb_header + label:hover::before,
|
||||
#chb_header:checked + label::before,
|
||||
#chb_header:checked + label:hover::before,
|
||||
#chb_menu + label::before,
|
||||
#chb_menu + label:hover::before,
|
||||
#chb_menu:checked + label::before,
|
||||
#chb_menu:checked + label:hover::before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#chb_theme + label::before,
|
||||
#chb_theme + label:hover::before,
|
||||
#chb_theme:checked + label::before,
|
||||
#chb_theme:checked + label:hover::before {font-size: 20px;}
|
||||
|
||||
#chb_theme + label::before {content: "\f186";}
|
||||
|
||||
#chb_header + label::before {content: "\f05a";}
|
||||
|
||||
#chb_menu + label::before {content: "\f013";}
|
||||
|
||||
#chb_theme + label::before,
|
||||
#chb_header + label::before,
|
||||
#chb_menu + label::before {color: var(--inactive-icon);}
|
||||
|
||||
#chb_theme:checked + label::before,
|
||||
#chb_theme:checked + label:hover::before {color: var(--theme-icon);}
|
||||
|
||||
#chb_header:checked + label::before,
|
||||
#chb_header:checked + label:hover::before {color: var(--header-icon);}
|
||||
|
||||
#chb_menu:checked + label::before,
|
||||
#chb_menu:checked + label:hover::before {color: var(--menu-icon);}
|
||||
|
||||
#chb_theme + label:hover::before,
|
||||
#chb_header + label:hover::before,
|
||||
#chb_menu + label:hover::before,
|
||||
#chb_theme:checked + label:hover::before,
|
||||
#chb_header:checked + label:hover::before,
|
||||
#chb_menu:checked + label:hover::before {filter: brightness(.8);}
|
||||
|
||||
input[type=text] {
|
||||
height: 35px;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: var(--input);
|
||||
color: var(--foreground);
|
||||
border-radius: 3px;
|
||||
transition: .3s;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
193
index.html
193
index.html
|
|
@ -1,134 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="us">
|
||||
|
||||
<head>
|
||||
<title>Welcome Javier!</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="icon" href="bookmark.png">
|
||||
<base target="_blank">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar">
|
||||
<div class="buttons">
|
||||
<input type="checkbox" id="chb_theme">
|
||||
<label class="btn_theme" for="chb_theme"></label>
|
||||
<input type="checkbox" id="chb_header">
|
||||
<label class="btn_header" for="chb_header"></label>
|
||||
<input type="checkbox" id="chb_menu">
|
||||
<label class="btn_menu" for="chb_menu"></label>
|
||||
</div>
|
||||
<div class="sidebar__settings">
|
||||
<h3>Weather</h3>
|
||||
<h4>API</h4>
|
||||
<input class="sidebar__input" type="text" placeholder="Enter key" id="key" autocomplete="off">
|
||||
<h4>City</h4>
|
||||
<input class="sidebar__input" type="text" placeholder="Enter city" id="city">
|
||||
<div class="sidebar__radio">
|
||||
<label class="control control-radio">
|
||||
°C
|
||||
<input type="radio" name="temp_unit" id="celsius">
|
||||
<div class="control__indicator"></div>
|
||||
</label>
|
||||
<label class="control control-radio">
|
||||
°F
|
||||
<input type="radio" name="temp_unit" id="fahrenheit">
|
||||
<div class="control__indicator"></div>
|
||||
</label>
|
||||
</div>
|
||||
<button class="sidebar__button" id="weather_apply">Apply</button>
|
||||
</div>
|
||||
<div class="sidebar__settings">
|
||||
<h3>Greeting</h3>
|
||||
<h4>Name</h4>
|
||||
<input class="sidebar__input" type="text" id="greeting_name" name="name_field">
|
||||
<button class="sidebar__button" id="name_apply">Apply</button>
|
||||
</div>
|
||||
<div class="sidebar__settings">
|
||||
<h3>Theme</h3>
|
||||
<h4>Background</h4>
|
||||
<input type="color" id="bg_input">
|
||||
<h4>Foreground</h4>
|
||||
<input type="color" id="fg_input">
|
||||
<h4>Accent</h4>
|
||||
<input type="color" id="accent_input">
|
||||
<div class="sidebar__button-container">
|
||||
<button class="sidebar__button" id="color_apply">Apply</button>
|
||||
<button class="sidebar__button" id="color_reset">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="header__greeting">Howdy, <span class="header__greeting-name">Javier Pacheco</span>.</h1>
|
||||
<div class="header__weather">
|
||||
<p id="header__weather-alert"></p>
|
||||
<p id="header__weather-info"></p>
|
||||
</div>
|
||||
<form class="search-form" action="https://google.com/search" method="get">
|
||||
<input type="text" class="search-form__input" id="gsearch" autocomplete="off" name="q" spellcheck="false">
|
||||
<button class="search-form__button">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="main">
|
||||
<a href="https://wiki.archlinux.org/">
|
||||
<i class="fa-brands fa-linux"></i>
|
||||
</a>
|
||||
<a href="https://suckless.org">
|
||||
<i class="fas fa-ghost"></i>
|
||||
</a>
|
||||
<a href="https://docs.voidlinux.org/">
|
||||
<i class="fa-solid fa-book-journal-whills"></i>
|
||||
</a>
|
||||
<a href="https://www.yewtu.be">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
<a href="https://mail.google.com/mail/ca/u/1/#inbox">
|
||||
<i class="fas fa-inbox"></i>
|
||||
</a>
|
||||
<a href="https://www.github.com/engjpacheco">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="https://www.gitlab.com/jpachecom4">
|
||||
<i class="fab fa-gitlab"></i>
|
||||
</a>
|
||||
<a href="https://autoliv-mx.leading2lean.com/">
|
||||
<i class="fa-solid fa-road-spikes"></i>
|
||||
</a>
|
||||
<a href="http://erp/cgi-bit/rpgle/cgipartvw3.pgm">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/theme.js"></script>
|
||||
<script src="js/greeting.js"></script>
|
||||
<script src="js/weather.js"></script>
|
||||
<script src="js/menu.js"></script>
|
||||
<script src="js/header.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
let sidebar = document.querySelector('.sidebar-wrapper');
|
||||
let searchForm = document.querySelector('.search-form');
|
||||
let searchInput = document.querySelector('.search-form__input');
|
||||
|
||||
// Search on enter key event
|
||||
document.getElementById("gsearch").addEventListener("keydown", event => {
|
||||
if (event.keyCode === 13) {
|
||||
var val = document.getElementById("gsearch").value;
|
||||
window.open("https://google.com/search?q=" + val);
|
||||
header.style.marginBottom = '';
|
||||
searchForm.classList.remove('show-search');
|
||||
searchInput.value = '';
|
||||
searchInput.blur();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>[ startpage - javier@venom ]</title>
|
||||
<link href="CSS/startpage.css" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script type="text/javascript" src="JS/script.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="realTimeClock()" bgcolor="#2a2a2a">
|
||||
<div class="outer">
|
||||
<div class="middle">
|
||||
<div class="inner w3-animate-opacity">
|
||||
<div><p1 id="clock"></p1> <p1 id="ampm"></p1></div>
|
||||
<form id="form" role="search">
|
||||
<input type="search" id="query" name="q" placeholder="Search Google..." autofocus>
|
||||
</form>
|
||||
<script>
|
||||
const f = document.getElementById('form');
|
||||
const q = document.getElementById('query');
|
||||
const search = 'https://www.google.com/search?q=';
|
||||
|
||||
function submitted(event) {
|
||||
event.preventDefault();
|
||||
const url = search + q.value;
|
||||
window.open(url, '_self');
|
||||
}
|
||||
|
||||
f.addEventListener('submit', submitted);
|
||||
</script>
|
||||
<p></p>
|
||||
<!--<p2> twitter | youtube | twitch </p2> -->
|
||||
<div class="box">
|
||||
<div class="items">
|
||||
<p class="lst">
|
||||
<span style="color: var(--color4)">[</span><a href="https:jpacheco.xyz">jpacheco</a><span style="color: var(--color5)">]</span>
|
||||
<span style="color: var(--color1)">[</span><a href="https://git.disroot.org/jpacheco">disroot</a><span style="color: var(--color1)">]</span>
|
||||
<span style="color: var(--color3)">[</span><a href="https://github.com/engjpacheco">github</a><span style="color: var(--color3)">]</span>
|
||||
<span style="color: var(--color3)">[</span><a href="https://gitlab.com/jpachecom4">gitlab</a><span style="color: var(--color3)">]</span>
|
||||
<span style="color: var(--color5)">[</span><a href="https://gmail.com">mail</a><span style="color: var(--color5)">]</span>
|
||||
</p>
|
||||
<p class="lst">
|
||||
<span style="color: var(--color1)">[</span><a href="https://autoliv-mx.leading2lean.com/">autoliv</a><span style="color: var(--color1)">]</span>
|
||||
<span style="color: var(--color5)">[</span><a href="http://erp/cgi-bit/rpgle/cgipartvw3.pgm">partview</a><span style="color: var(--color5)">]</span>
|
||||
<span style="color: var(--color6)">[</span><a href="https://us.edstem.org/courses/390/discussion/22561">ed</a><span style="color: var(--color6)">]</span>
|
||||
</p>
|
||||
<p class="lst">
|
||||
<span style="color: var(--color5)">[</span><a href="https://web.telegram.org/a/#-1421253041">Telegram</a><span style="color: var(--color5)">]</span>
|
||||
<span style="color: var(--color2)">[</span><a href="https://youtube.com">youtube</a><span style="color: var(--color2)">]</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
let greeting = document.querySelector('.header__greeting');
|
||||
let buttonApplyName = document.getElementById('name_apply');
|
||||
let nameInput = document.getElementById('greeting_name');
|
||||
|
||||
// Greetings
|
||||
const night = 'Good night';
|
||||
const morning = 'Good morning';
|
||||
const afternoon = 'Good afternoon';
|
||||
const evening = 'Good evening';
|
||||
|
||||
// Name
|
||||
if (localStorage.getItem('name') !== null) {
|
||||
let name = localStorage.getItem('name');
|
||||
let greetingName = `<span class="header__greeting-name">${name}</span>.`;
|
||||
setGreeting(greetingName);
|
||||
nameInput.placeholder = name;
|
||||
} else {
|
||||
let name = 'Javier Pacheco';
|
||||
let greetingName = `<span class="header__greeting-name">${name}</span>.`
|
||||
setGreeting(greetingName);
|
||||
nameInput.placeholder = name;
|
||||
}
|
||||
|
||||
buttonApplyName.onclick = () => {
|
||||
if (nameInput.value !== '') {
|
||||
let greetingName = `<span class="header__greeting-name">${nameInput.value}</span>.`;
|
||||
setGreeting(greetingName);
|
||||
|
||||
localStorage.setItem('name', nameInput.value);
|
||||
|
||||
nameInput.placeholder = nameInput.value;
|
||||
nameInput.value = '';
|
||||
nameInput.blur();
|
||||
}
|
||||
};
|
||||
|
||||
// Hours of the greetings
|
||||
function setGreeting(greetingName) {
|
||||
let hour = new Date().getHours();
|
||||
|
||||
if (hour >= 23 || hour < 6) {
|
||||
greeting.innerHTML = `${night}, ${greetingName}`;
|
||||
} else if (hour >= 6 && hour < 12) {
|
||||
greeting.innerHTML = `${morning}, ${greetingName}`;
|
||||
} else if (hour >= 12 && hour < 17) {
|
||||
greeting.innerHTML = `${afternoon}, ${greetingName}`;
|
||||
} else {
|
||||
greeting.innerHTML = `${evening}, ${greetingName}`;
|
||||
}
|
||||
}
|
||||
78
js/header.js
78
js/header.js
|
|
@ -1,78 +0,0 @@
|
|||
let buttonHeader = document.getElementById('chb_header');
|
||||
let header = document.querySelector('.header');
|
||||
let headerWeather = document.querySelector('.header__weather');
|
||||
let headerGreeting = document.querySelector('.header__greeting');
|
||||
let icons = document.querySelectorAll('.main a');
|
||||
|
||||
localStorage.getItem('header') === 'shown' || localStorage.getItem('header') === null ? showHeader() : hideHeader();
|
||||
|
||||
buttonHeader.onclick = () => buttonHeader.checked ? showHeader() : hideHeader();
|
||||
|
||||
function showHeader() {
|
||||
buttonHeader.checked = true;
|
||||
localStorage.setItem('header', 'shown');
|
||||
|
||||
for (let e of icons) {
|
||||
e.classList.remove('big-icons');
|
||||
}
|
||||
|
||||
header.style.opacity = '.75';
|
||||
header.style.zIndex = '1';
|
||||
headerWeather.classList.remove('hide-header-elements');
|
||||
headerGreeting.classList.remove('hide-header-elements');
|
||||
}
|
||||
|
||||
function hideHeader() {
|
||||
buttonHeader.checked = false;
|
||||
localStorage.setItem('header', 'hidden');
|
||||
|
||||
for (let e of icons) {
|
||||
e.classList.add('big-icons');
|
||||
}
|
||||
|
||||
header.style.opacity = '0';
|
||||
header.style.zIndex = '-1';
|
||||
}
|
||||
|
||||
document.addEventListener('keyup', (event) => {
|
||||
let header = document.querySelector('.header');
|
||||
let sidebar = document.querySelector('.sidebar-wrapper');
|
||||
let searchForm = document.querySelector('.search-form');
|
||||
let searchInput = document.querySelector('.search-form__input');
|
||||
|
||||
if (searchInput !== document.activeElement &&
|
||||
event.keyCode >= 65 &&
|
||||
event.keyCode <= 90 &&
|
||||
!sidebar.classList.contains('show-sidebar')) {
|
||||
if (buttonHeader.checked === false) {
|
||||
header.style.opacity = '.75';
|
||||
header.style.zIndex = '1';
|
||||
headerWeather.classList.add('hide-header-elements');
|
||||
headerGreeting.classList.add('hide-header-elements');
|
||||
|
||||
for (let e of icons) {
|
||||
e.classList.remove('big-icons');
|
||||
}
|
||||
}
|
||||
|
||||
header.style.marginBottom = '35px';
|
||||
searchForm.classList.add('show-search');
|
||||
searchInput.focus();
|
||||
searchInput.value = event.key;
|
||||
}
|
||||
|
||||
if (event.code === 'Escape') {
|
||||
if (buttonHeader.checked === false) {
|
||||
header.style.opacity = '0';
|
||||
|
||||
for (let e of icons) {
|
||||
e.classList.add('big-icons');
|
||||
}
|
||||
}
|
||||
|
||||
header.style.marginBottom = '';
|
||||
searchForm.classList.remove('show-search');
|
||||
searchInput.value = '';
|
||||
searchInput.blur();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
let buttonSidebar = document.querySelector('.btn_menu');
|
||||
buttonSidebar.onclick = () => {
|
||||
let sidebar = document.querySelector('.sidebar-wrapper');
|
||||
sidebar.classList.toggle('show-sidebar');
|
||||
};
|
||||
299
js/script.js
299
js/script.js
|
|
@ -1,299 +0,0 @@
|
|||
/* based on chromium plugin code, adapted by Nibble<.gs@gmail.com> */
|
||||
var hint_num_str = '';
|
||||
var hint_elems = [];
|
||||
var hint_open_in_new_tab = false;
|
||||
var hint_enabled = false;
|
||||
function hintMode(newtab){
|
||||
hint_enabled = true;
|
||||
if (newtab) {
|
||||
hint_open_in_new_tab = true;
|
||||
} else {
|
||||
hint_open_in_new_tab = false;
|
||||
}
|
||||
setHints();
|
||||
document.removeEventListener('keydown', initKeyBind, false);
|
||||
document.addEventListener('keydown', hintHandler, false);
|
||||
hint_num_str = '';
|
||||
}
|
||||
function hintHandler(e){
|
||||
e.preventDefault(); //Stop Default Event
|
||||
var pressedKey = get_key(e);
|
||||
if (pressedKey == 'Enter') {
|
||||
if (hint_num_str == '')
|
||||
hint_num_str = '1';
|
||||
judgeHintNum(Number(hint_num_str));
|
||||
} else if (/[0-9]/.test(pressedKey) == false) {
|
||||
removeHints();
|
||||
} else {
|
||||
hint_num_str += pressedKey;
|
||||
var hint_num = Number(hint_num_str);
|
||||
if (hint_num * 10 > hint_elems.length + 1) {
|
||||
judgeHintNum(hint_num);
|
||||
} else {
|
||||
var hint_elem = hint_elems[hint_num - 1];
|
||||
if (hint_elem != undefined && hint_elem.tagName.toLowerCase() == 'a') {
|
||||
setHighlight(hint_elem, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function setHighlight(elem, is_active) {
|
||||
if (is_active) {
|
||||
var active_elem = document.body.querySelector('a[highlight=hint_active]');
|
||||
if (active_elem != undefined)
|
||||
active_elem.setAttribute('highlight', 'hint_elem');
|
||||
elem.setAttribute('highlight', 'hint_active');
|
||||
} else {
|
||||
elem.setAttribute('highlight', 'hint_elem');
|
||||
}
|
||||
}
|
||||
function setHintRules() {
|
||||
if (document.styleSheets.length < 1) {
|
||||
var style = document.createElement("style");
|
||||
style.appendChild(document.createTextNode(""));
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
var ss = document.styleSheets[0];
|
||||
ss.insertRule('a[highlight=hint_elem] {background-color: NULL}', 0);
|
||||
ss.insertRule('a[highlight=hint_active] {background-color: NULL}', 0);
|
||||
}
|
||||
function deleteHintRules() {
|
||||
var ss = document.styleSheets[0];
|
||||
ss.deleteRule(0);
|
||||
ss.deleteRule(0);
|
||||
}
|
||||
function judgeHintNum(hint_num) {
|
||||
var hint_elem = hint_elems[hint_num - 1];
|
||||
if (hint_elem != undefined) {
|
||||
execSelect(hint_elem);
|
||||
} else {
|
||||
removeHints();
|
||||
}
|
||||
}
|
||||
function execSelect(elem) {
|
||||
var tag_name = elem.tagName.toLowerCase();
|
||||
var type = elem.type ? elem.type.toLowerCase() : "";
|
||||
if (tag_name == 'a' && elem.href != '') {
|
||||
setHighlight(elem, true);
|
||||
// TODO: ajax, <select>
|
||||
if (hint_open_in_new_tab)
|
||||
window.open(elem.href);
|
||||
else location.href=elem.href;
|
||||
var textField = document.createElement("textarea");
|
||||
textField.innerText = elem.href
|
||||
window.document.body.appendChild(textField);
|
||||
textField.select();
|
||||
window.document.execCommand("copy");
|
||||
textField.remove();
|
||||
} else if (tag_name == 'input' && (type == "submit" || type == "button" || type == "reset")) {
|
||||
elem.click();
|
||||
} else if (tag_name == 'input' && (type == "radio" || type == "checkbox")) {
|
||||
// TODO: toggle checkbox
|
||||
elem.checked = !elem.checked;
|
||||
} else if (tag_name == 'input' || tag_name == 'textarea') {
|
||||
elem.focus();
|
||||
elem.setSelectionRange(elem.value.length, elem.value.length);
|
||||
}
|
||||
removeHints();
|
||||
}
|
||||
function setHints() {
|
||||
setHintRules();
|
||||
var win_top = window.scrollY;
|
||||
var win_bottom = win_top + window.innerHeight;
|
||||
var win_left = window.scrollX;
|
||||
var win_right = win_left + window.innerWidth;
|
||||
// TODO: <area>
|
||||
var elems = document.body.querySelectorAll('a, input:not([type=hidden]), textarea, select, button');
|
||||
var div = document.createElement('div');
|
||||
div.setAttribute('highlight', 'hints');
|
||||
document.body.appendChild(div);
|
||||
for (var i = 0; i < elems.length; i++) {
|
||||
var elem = elems[i];
|
||||
if (!isHintDisplay(elem))
|
||||
continue;
|
||||
var pos = elem.getBoundingClientRect();
|
||||
var elem_top = win_top + pos.top;
|
||||
var elem_bottom = win_top + pos.bottom;
|
||||
var elem_left = win_left + pos.left;
|
||||
var elem_right = win_left + pos.left;
|
||||
if ( elem_bottom >= win_top && elem_top <= win_bottom) {
|
||||
hint_elems.push(elem);
|
||||
setHighlight(elem, false);
|
||||
var span = document.createElement('span');
|
||||
span.style.cssText = [
|
||||
'left: ', elem_left, 'px;',
|
||||
'top: ', elem_top, 'px;',
|
||||
'position: absolute;',
|
||||
'font-size: 13px;',
|
||||
'background-color: ' + (hint_open_in_new_tab ? '#458588' : '#1d2021') + ';',
|
||||
'color: white;',
|
||||
'font-weight: bold;',
|
||||
'padding: 0px 1px;',
|
||||
'z-index: 100000;'
|
||||
].join('');
|
||||
span.innerHTML = hint_elems.length;
|
||||
div.appendChild(span);
|
||||
if (elem.tagName.toLowerCase() == 'a') {
|
||||
if (hint_elems.length == 1) {
|
||||
setHighlight(elem, true);
|
||||
} else {
|
||||
setHighlight(elem, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function isHintDisplay(elem) {
|
||||
var pos = elem.getBoundingClientRect();
|
||||
return (pos.height != 0 && pos.width != 0);
|
||||
}
|
||||
function removeHints() {
|
||||
if (!hint_enabled)
|
||||
return;
|
||||
hint_enabled = false;
|
||||
deleteHintRules();
|
||||
for (var i = 0; i < hint_elems.length; i++) {
|
||||
hint_elems[i].removeAttribute('highlight');
|
||||
}
|
||||
hint_elems = [];
|
||||
hint_num_str = '';
|
||||
var div = document.body.querySelector('div[highlight=hints]');
|
||||
if (div != undefined) {
|
||||
document.body.removeChild(div);
|
||||
}
|
||||
document.removeEventListener('keydown', hintHandler, false);
|
||||
document.addEventListener('keydown', initKeyBind, false);
|
||||
}
|
||||
function addKeyBind( key, func, eve ){
|
||||
var pressedKey = get_key(eve);
|
||||
if( pressedKey == key ){
|
||||
eve.preventDefault(); //Stop Default Event
|
||||
eval(func);
|
||||
}
|
||||
}
|
||||
document.addEventListener( 'keydown', initKeyBind, false );
|
||||
function initKeyBind(e){
|
||||
var t = e.target;
|
||||
if( t.nodeType == 1){
|
||||
addKeyBind( 'M-M', 'hintMode()', e );
|
||||
addKeyBind( 'M-m', 'hintMode(true)', e );
|
||||
addKeyBind( 'M-c', 'removeHints()', e );
|
||||
}
|
||||
}
|
||||
var keyId = {
|
||||
"U+0008" : "BackSpace",
|
||||
"U+0009" : "Tab",
|
||||
"U+0018" : "Cancel",
|
||||
"U+001B" : "Esc",
|
||||
"U+0020" : "Space",
|
||||
"U+0021" : "!",
|
||||
"U+0022" : "\"",
|
||||
"U+0023" : "#",
|
||||
"U+0024" : "$",
|
||||
"U+0026" : "&",
|
||||
"U+0027" : "'",
|
||||
"U+0028" : "(",
|
||||
"U+0029" : ")",
|
||||
"U+002A" : "*",
|
||||
"U+002B" : "+",
|
||||
"U+002C" : ",",
|
||||
"U+002D" : "-",
|
||||
"U+002E" : ".",
|
||||
"U+002F" : "/",
|
||||
"U+0030" : "0",
|
||||
"U+0031" : "1",
|
||||
"U+0032" : "2",
|
||||
"U+0033" : "3",
|
||||
"U+0034" : "4",
|
||||
"U+0035" : "5",
|
||||
"U+0036" : "6",
|
||||
"U+0037" : "7",
|
||||
"U+0038" : "8",
|
||||
"U+0039" : "9",
|
||||
"U+003A" : ":",
|
||||
"U+003B" : ";",
|
||||
"U+003C" : "<",
|
||||
"U+003D" : "=",
|
||||
"U+003E" : ">",
|
||||
"U+003F" : "?",
|
||||
"U+0040" : "@",
|
||||
"U+0041" : "a",
|
||||
"U+0042" : "b",
|
||||
"U+0043" : "c",
|
||||
"U+0044" : "d",
|
||||
"U+0045" : "e",
|
||||
"U+0046" : "f",
|
||||
"U+0047" : "g",
|
||||
"U+0048" : "h",
|
||||
"U+0049" : "i",
|
||||
"U+004A" : "j",
|
||||
"U+004B" : "k",
|
||||
"U+004C" : "l",
|
||||
"U+004D" : "m",
|
||||
"U+004E" : "n",
|
||||
"U+004F" : "o",
|
||||
"U+0050" : "p",
|
||||
"U+0051" : "q",
|
||||
"U+0052" : "r",
|
||||
"U+0053" : "s",
|
||||
"U+0054" : "t",
|
||||
"U+0055" : "u",
|
||||
"U+0056" : "v",
|
||||
"U+0057" : "w",
|
||||
"U+0058" : "x",
|
||||
"U+0059" : "y",
|
||||
"U+005A" : "z",
|
||||
//"U+005B" : "[",
|
||||
//"U+005C" : "\\",
|
||||
//"U+005D" : "]",
|
||||
"U+00DB" : "[",
|
||||
"U+00DC" : "\\",
|
||||
"U+00DD" : "]",
|
||||
"U+005E" : "^",
|
||||
"U+005F" : "_",
|
||||
"U+0060" : "`",
|
||||
"U+007B" : "{",
|
||||
"U+007C" : "|",
|
||||
"U+007D" : "}",
|
||||
"U+007F" : "Delete",
|
||||
"U+00A1" : "¡",
|
||||
"U+0300" : "CombGrave",
|
||||
"U+0300" : "CombAcute",
|
||||
"U+0302" : "CombCircum",
|
||||
"U+0303" : "CombTilde",
|
||||
"U+0304" : "CombMacron",
|
||||
"U+0306" : "CombBreve",
|
||||
"U+0307" : "CombDot",
|
||||
"U+0308" : "CombDiaer",
|
||||
"U+030A" : "CombRing",
|
||||
"U+030B" : "CombDblAcute",
|
||||
"U+030C" : "CombCaron",
|
||||
"U+0327" : "CombCedilla",
|
||||
"U+0328" : "CombOgonek",
|
||||
"U+0345" : "CombYpogeg",
|
||||
"U+20AC" : "€",
|
||||
"U+3099" : "CombVoice",
|
||||
"U+309A" : "CombSVoice",
|
||||
}
|
||||
function get_key(evt){
|
||||
var key = keyId[evt.keyIdentifier] || evt.keyIdentifier,
|
||||
ctrl = evt.ctrlKey ? 'C-' : '',
|
||||
meta = (evt.metaKey || evt.altKey) ? 'M-' : '',
|
||||
shift = evt.shiftKey ? 'S-' : '';
|
||||
if (evt.shiftKey){
|
||||
if (/^[a-z]$/.test(key))
|
||||
return ctrl+meta+key.toUpperCase();
|
||||
if (/^[0-9]$/.test(key)) {
|
||||
switch(key) {
|
||||
// TODO
|
||||
case "4":
|
||||
key = "$";
|
||||
break;
|
||||
};
|
||||
return key;
|
||||
}
|
||||
if (/^(Enter|Space|BackSpace|Tab|Esc|Home|End|Left|Right|Up|Down|PageUp|PageDown|F(\d\d?))$/.test(key))
|
||||
return ctrl+meta+shift+key;
|
||||
}
|
||||
return ctrl+meta+key;
|
||||
}
|
||||
117
js/theme.js
117
js/theme.js
|
|
@ -1,117 +0,0 @@
|
|||
let switcher = document.getElementById('chb_theme');
|
||||
let buttonApply = document.getElementById('color_apply');
|
||||
let buttonReset = document.getElementById('color_reset');
|
||||
let bgInput = document.getElementById('bg_input');
|
||||
let fgInput = document.getElementById('fg_input');
|
||||
let accentInput = document.getElementById('accent_input');
|
||||
|
||||
switcher.onclick = () => switcher.checked ? darkTheme() : lightTheme();
|
||||
|
||||
localStorage.getItem('theme') === 'dark' ? darkTheme() : lightTheme();
|
||||
|
||||
function darkTheme() {
|
||||
switcher.checked = true;
|
||||
localStorage.setItem('theme', 'dark');
|
||||
document.body.setAttribute('theme', 'dark');
|
||||
|
||||
setColors('dark');
|
||||
}
|
||||
|
||||
function lightTheme() {
|
||||
switcher.checked = false;
|
||||
localStorage.setItem('theme', 'light');
|
||||
document.body.setAttribute('theme', 'light');
|
||||
|
||||
setColors('light');
|
||||
}
|
||||
|
||||
buttonReset.onclick = () => {
|
||||
let themeName = localStorage.getItem('theme');
|
||||
let root = document.querySelector(`[theme="${themeName}"]`);
|
||||
|
||||
localStorage.removeItem(themeName);
|
||||
|
||||
root.style.setProperty('--background', null);
|
||||
root.style.setProperty('--foreground', null);
|
||||
root.style.setProperty('--accent', null);
|
||||
|
||||
resetColors(themeName);
|
||||
};
|
||||
|
||||
buttonApply.onclick = () => {
|
||||
let themeName = localStorage.getItem('theme');
|
||||
let root = document.querySelector(`[theme="${themeName}"]`);
|
||||
let bgColor = getComputedStyle(root).getPropertyValue('--background');
|
||||
let fgColor = getComputedStyle(root).getPropertyValue('--foreground');
|
||||
let accentColor = getComputedStyle(root).getPropertyValue('--accent');
|
||||
|
||||
|
||||
if (bgInput.value !== bgColor) {
|
||||
bgColor = bgInput.value;
|
||||
root.style.cssText = `--background: ${bgColor};`;
|
||||
}
|
||||
|
||||
if (fgInput.value !== fgColor) {
|
||||
fgColor = fgInput.value;
|
||||
root.style.cssText += `--foreground: ${fgColor};`;
|
||||
}
|
||||
|
||||
if (accentInput.value !== accentColor) {
|
||||
accentColor = accentInput.value;
|
||||
root.style.cssText += `--accent: ${accentColor};`;
|
||||
}
|
||||
|
||||
let colors =
|
||||
{
|
||||
'background': bgColor,
|
||||
'foreground': fgColor,
|
||||
'accent': accentColor
|
||||
};
|
||||
|
||||
localStorage.setItem(themeName, JSON.stringify(colors));
|
||||
}
|
||||
|
||||
function resetColors(themeName) {
|
||||
let root = document.querySelector(`[theme="${themeName}"]`);
|
||||
|
||||
let bgColor = getComputedStyle(root).getPropertyValue('--background');
|
||||
let fgColor = getComputedStyle(root).getPropertyValue('--foreground');
|
||||
let accentColor = getComputedStyle(root).getPropertyValue('--accent');
|
||||
|
||||
let colors =
|
||||
{
|
||||
'background': bgColor,
|
||||
'foreground': fgColor,
|
||||
'accent': accentColor
|
||||
};
|
||||
|
||||
localStorage.setItem(themeName, JSON.stringify(colors));
|
||||
|
||||
bgInput.value = colors['background'].replace(/\s/g, '');
|
||||
fgInput.value = colors['foreground'].replace(/\s/g, '');
|
||||
accentInput.value = colors['accent'].replace(/\s/g, '');
|
||||
}
|
||||
|
||||
function setColors(themeName) {
|
||||
let root = document.querySelector(`[theme="${themeName}"]`);
|
||||
|
||||
root.style.setProperty('--background', null);
|
||||
root.style.setProperty('--foreground', null);
|
||||
root.style.setProperty('--accent', null);
|
||||
|
||||
if (localStorage.getItem(themeName) !== null) {
|
||||
let colors = JSON.parse(localStorage.getItem(themeName));
|
||||
|
||||
root.style.cssText = `
|
||||
--background: ${colors['background']};
|
||||
--foreground: ${colors['foreground']};
|
||||
--accent: ${colors['accent']};
|
||||
`;
|
||||
|
||||
bgInput.value = colors['background'].replace(/\s/g, '');
|
||||
fgInput.value = colors['foreground'].replace(/\s/g, '');
|
||||
accentInput.value = colors['accent'].replace(/\s/g, '');
|
||||
} else {
|
||||
resetColors(themeName);
|
||||
}
|
||||
}
|
||||
111
js/weather.js
111
js/weather.js
|
|
@ -1,111 +0,0 @@
|
|||
let keyInput = document.getElementById('key');
|
||||
let cityInput = document.getElementById('city');
|
||||
let apply = document.getElementById('weather_apply');
|
||||
let weatherAlert = document.getElementById('header__weather-alert');
|
||||
let info = document.getElementById('header__weather-info');
|
||||
let radioCelsius = document.getElementById('celsius');
|
||||
let radioFahrenheit = document.getElementById('fahrenheit');
|
||||
let weatherLS = localStorage.getItem('weather');
|
||||
|
||||
if (weatherLS !== null) {
|
||||
let key = JSON.parse(weatherLS).key;
|
||||
let city = JSON.parse(weatherLS).city;
|
||||
|
||||
keyInput.placeholder = key;
|
||||
cityInput.placeholder = city;
|
||||
getWeatherInfo(key, city);
|
||||
} else {
|
||||
getWeatherInfo(null, null);
|
||||
}
|
||||
|
||||
apply.onclick = () => {
|
||||
let key = keyInput.value;
|
||||
let city = cityInput.value;
|
||||
let weatherLS = localStorage.getItem('weather');
|
||||
|
||||
if (key === '') {
|
||||
if (weatherLS !== null) {
|
||||
key = JSON.parse(weatherLS).key;
|
||||
}
|
||||
} else {
|
||||
weatherAlert.style.display = 'none';
|
||||
}
|
||||
|
||||
if (city === '') {
|
||||
if (weatherLS !== null) {
|
||||
city = JSON.parse(weatherLS).city;
|
||||
}
|
||||
} else {
|
||||
weatherAlert.style.display = 'none';
|
||||
}
|
||||
|
||||
radioFahrenheit.checked ? tempUnit = 'F' : tempUnit = 'C';
|
||||
|
||||
let info = {
|
||||
key: key,
|
||||
city: city,
|
||||
tempUnit: tempUnit
|
||||
};
|
||||
|
||||
localStorage.setItem('weather', JSON.stringify(info));
|
||||
|
||||
cityInput.value = '';
|
||||
cityInput.blur();
|
||||
cityInput.placeholder = city;
|
||||
|
||||
keyInput.value = '';
|
||||
keyInput.blur();
|
||||
keyInput.placeholder = key;
|
||||
|
||||
getWeatherInfo(key, city);
|
||||
}
|
||||
|
||||
function getWeatherInfo(key, city) {
|
||||
fetch(`https://api.openweathermap.org/data/2.5/weather?q=matamoros&appid=b99f1143ff8154505212b913f22645c0`)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
celsius = Math.round(parseFloat(data.main.temp) - 273.15);
|
||||
fahrenheit = Math.round(((parseFloat(data.main.temp) - 273.15) * 1.8) + 32);
|
||||
description = data.weather[0].description;
|
||||
})
|
||||
.then(function () {
|
||||
drawWeather();
|
||||
})
|
||||
.catch(function (error) {
|
||||
if (key === '' || key === null) {
|
||||
weatherAlert.style.display = '';
|
||||
weatherAlert.innerHTML = 'remember to add your api key';
|
||||
keyInput.placeholder = 'Enter key';
|
||||
} else if (city === '' || city === null) {
|
||||
weatherAlert.style.display = '';
|
||||
weatherAlert.innerHTML = 'remember to add city name';
|
||||
cityInput.placeholder = 'Enter city';
|
||||
}
|
||||
else {
|
||||
weatherAlert.style.display = 'none';
|
||||
info.innerHTML = '¯\u005C_(ツ)_/¯';
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawWeather() {
|
||||
if (weatherLS) {
|
||||
if (JSON.parse(weatherLS).tempUnit === 'C') {
|
||||
temp = `${celsius}\u00B0C`;
|
||||
radioCelsius.checked = true;
|
||||
} else {
|
||||
temp = `${fahrenheit}\u00B0F`;
|
||||
radioFahrenheit.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!weatherLS) {
|
||||
temp = `${celsius}\u00B0C`;
|
||||
radioCelsius.checked = true;
|
||||
}
|
||||
|
||||
info.innerHTML = `${description}, <span class="header__weather-temp">${temp}</span>`;
|
||||
}
|
||||
Loading…
Reference in New Issue