hc/startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge v2

Browse Source
This commit is contained in:
Tressley Cahill 2022-11-03 12:26:52 -04:00 committed by GitHub
commit 8398f9cd54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 210 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -1,11 +1,7 @@
![traichu](favicon-32x32.png?raw=true)
> **trai´chu,** _n_. A simple, semantic start page built with HTML 5, CSS 3, and JavaScript.
> **trai´chu,** _n_. A simple, semantic start page built with HTML, CSS, and a mouse-sized bit of JavaScript.
**_traichu's** markup is [valid](https://validator.w3.org/nu/?doc=https%3A%2F%2Ftressley.github.io%2F_traichu%2Findex.html) and aims to adhere to HTML semantics. [Traditional Japanese](https://www.nipponcolors.com), [WCAG 2.0](https://www.w3.org/TR/WCAG20/) compliant colors make up the color palette. The monospace font is ol' [Inconsolata](https://fonts.google.com/specimen/Inconsolata) loaded via [Google Fonts](https://fonts.google.com). Icons are [inline SVGs](https://css-tricks.com/pretty-good-svg-icon-system/), [DuckDuckGo's API](https://icons.duckduckgo.com/ip3/duckduckgo.com.ico) delivers the favicons, and [OpenWeather's API](https://openweathermap.org) provides the weather forecast and icons. Vanilla JavaScript and CSS handle all interactivity.
This start page utilizes technologies such as [DuckDuckGo's favicon API](https://icons.duckduckgo.com/ip3/duckduckgo.com.ico) and [inline SVGs](https://css-tricks.com/pretty-good-svg-icon-system/) to handle the images (with the exception of the traichu sprite).
The color palette is composed of contrast accessibile, [WCAG 2.0](https://www.w3.org/TR/WCAG20/) compliant colors listed in [Japanese Industrial Standards](https://ja.wikipedia.org/wiki/JIS%E6%85%A3%E7%94%A8%E8%89%B2%E5%90%8D). The font is [Inconsolata](https://fonts.google.com/specimen/Inconsolata) loaded via [Google Fonts](https://fonts.google.com).
It uses [DuckDuckGo](https://duckduckgo.com)'s search engine in an effort to increase privacy and anonymity.
All interactions are handled via JavaScript and CSS animations.
[DuckDuckGo](https://duckduckgo.com) is the default search engine because privacy is important 'round here.

52
css/animations.css
View File

@ -8,52 +8,14 @@
to { opacity: 1; }
}
@-webkit-keyframes flicker {
0% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
10% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
20% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
30% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
40% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
50% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
60% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
70% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
80% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
90% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}
@keyframes flicker {
0% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
10% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
20% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
30% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
40% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
50% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
60% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
70% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
80% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
90% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}
@-webkit-keyframes slide {
0% { -webkit-transform: translateX(0); transform: translateX(0); }
100% { -webkit-transform: translateX(-1600px); transform: translateX(-1600px); }
}
@keyframes slide {
0% { -webkit-transform: translateX(0); transform: translateX(0); }
100% { -webkit-transform: translateX(-1600px); transform: translateX(-1600px); }
}
@-webkit-keyframes slime {
0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes slime {

154
css/styles.css
View File

@ -14,21 +14,66 @@ main {
}
#traichu {
animation: fade 0.125s ease-in;
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
padding: var(--space-m);
row-gap: var(--space-l);
padding: var(--spacing-l) var(--spacing-m) var(--spacing-m) var(--spacing-m);
row-gap: var(--spacing-l);
width: 20rem;
}
header {
display: flex;
animation: fade 1s ease-in;
display: none;
flex: 0 1 auto;
flex-direction: row;
justify-content: center;
padding: var(--spacing-m) var(--spacing-m) 0 var(--spacing-m);
position: absolute;
top: 0;
width: 100%;
}
header img { width: 6rem; }
#date-time,
#weather { flex: 1 1 auto; }
#weather { text-align: right; }
#weather img {
display: inline-flex;
margin-right: var(--spacing-xs);
width: 1.5rem;
}
#date,
#location {
color: var(--primary-link-hover-color);
font-weight: 700;
}
#time,
#details {
color: var(--primary-link-color);
text-transform: capitalize;
}
#details {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.separator { margin: 0 0.25rem; }
aside {
display: flex;
justify-content: space-around;
}
aside img,
aside svg { height: 4.5rem; }
#dock ul {
display: flex;
@ -36,46 +81,38 @@ header img { width: 6rem; }
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
column-gap: var(--space-m);
row-gap: var(--space-m);
column-gap: var(--spacing-m);
row-gap: var(--spacing-m);
padding: 0;
}
#dock ul li {
transition: margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
#dock ul li:hover {
animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
margin-top: -0.5rem;
outline: none;
}
#dock a {
display: block;
fill: var(--primary-link-color);
transition: fill 0.25s ease-in-out;
width: 1.5rem;
}
#dock a:focus,
#dock a:hover {
animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
fill: var(--primary-link-hover-color);
outline: none;
}
#dock ul li:nth-child(1) a:focus,
#dock ul li:nth-child(1) a:hover { fill: hsl(5, 81%, 56%); } /* Gmail */
#dock ul li:nth-child(2) a:focus,
#dock ul li:nth-child(2) a:hover { fill: hsl(217, 89%, 61%); } /* Google Calendar */
#dock ul li:nth-child(3) a:focus,
#dock ul li:nth-child(3) a:hover { fill: hsl(44, 100%, 50%); } /* Google Keep */
#dock ul li:nth-child(4) a:focus,
#dock ul li:nth-child(4) a:hover { fill: var(--primary-link-hover-color); } /* Notion */
#dock ul li:nth-child(5) a:focus,
#dock ul li:nth-child(5) a:hover { fill: hsl(102, 53%, 52%); } /* Github */
#dock ul li:nth-child(6) a:focus,
#dock ul li:nth-child(6) a:hover { fill: hsl(14, 89%, 53%); } /* Figma */
#dock li:nth-child(1) a:focus,
#dock li:nth-child(1) a:hover { fill: hsl(5, 81%, 56%); } /* Gmail */
#dock li:nth-child(2) a:focus,
#dock li:nth-child(2) a:hover { fill: hsl(217, 89%, 61%); } /* Google Calendar */
#dock li:nth-child(3) a:focus,
#dock li:nth-child(3) a:hover { fill: hsl(44, 100%, 50%); } /* Google Keep */
#dock li:nth-child(4) a:focus,
#dock li:nth-child(4) a:hover { fill: var(--primary-link-hover-color); } /* Notion */
#dock li:nth-child(5) a:focus,
#dock li:nth-child(5) a:hover { fill: hsl(102, 53%, 52%); } /* Github */
#dock li:nth-child(6) a:focus,
#dock li:nth-child(6) a:hover { fill: hsl(14, 89%, 53%); } /* Figma */
#dock svg { height: 1.5rem; }
#search {
display: flex;
@ -83,12 +120,12 @@ header img { width: 6rem; }
}
#search form {
flex-grow: 1;
flex: 1 1 auto;
width: 100%;
}
#search input {
background-color: var(--primary-background-color);
background-color: transparent;
background-position: right 1.25rem center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
@ -97,7 +134,7 @@ header img { width: 6rem; }
font-family: var(--font-sans-serif);
line-height: 1.5;
outline: 0.25rem solid transparent;
padding: var(--space-m);
padding: var(--spacing-m);
width: 100%;
}
@ -110,10 +147,12 @@ header img { width: 6rem; }
#search input:hover { border-color: hsl(var(--color-white-hsl) / 0.5); }
#search input:focus {
background-color: hsl(var(--color-white-hsl) / 0.05);
background-image: var(--svg-search-light-gray);
background-color: hsl(var(--color-white-hsl) / 0.025);
outline-color: var(--color-orange);
}
#bookmarks a:focus,
#bookmarks a:hover { background-color: hsl(var(--color-white-hsl) / 0.025); }
}
@media (prefers-color-scheme: light) {
@ -126,9 +165,11 @@ header img { width: 6rem; }
#search input:focus {
background-color: var(--color-white);
background-image: var(--svg-search-gray);
outline-color: var(--color-orange);
}
#bookmarks a:focus,
#bookmarks a:hover { background-color: hsl(var(--color-black-hsl) / 0.075); }
}
#search input:active,
@ -155,30 +196,53 @@ header img { width: 6rem; }
display: flex;
flex-direction: row;
line-height: 1;
margin-bottom: var(--space-m);
}
.favicon {
margin-right: var(--space-s);
width: 1rem;
margin-right: var(--spacing-s);
height: 1rem;
}
#bookmarks a {
align-items: center;
border-radius: 0.25rem;
display: flex;
color: var(--primary-link-color);
padding: var(--spacing-s);
text-decoration: none;
transition: color 0.25s ease-in-out;
transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}
#bookmarks a:focus,
#bookmarks a:hover { color: var(--primary-link-hover-color); }
#bookmarks a:hover {
color: var(--primary-link-hover-color);
outline: none;
}
/*
Accessible hiding for screen readers
https://webaim.org/techniques/css/invisiblecontent/#techniques
*/
.sr-only {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
/* Responsive Media Queries */
@media screen and (min-width: 48em) {
header { display: flex; }
#traichu {
padding: var(--space-m);
width: 40rem;
padding: 0;
width: 45rem; /* 720px */
}
header img { width: 8rem; }
aside img,
aside svg { height: 7.5rem; }
#dock ul {
column-gap: 0;
@ -188,5 +252,3 @@ header img { width: 6rem; }
#bookmarks { flex-direction: row; }
}
.slide { animation: slide 4250ms ease-in; }

26
css/vars.css
View File

@ -1,14 +1,16 @@
:root {
/*
HSL(a) for better control over colors
Colors - pulled from https://nipponcolors.com
HSL(a) is used for better control.
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
https://css-tricks.com/color-alpha-anywhere/
*/
--color-black-hsl: 0 0% 11%; /* #1C1C1C */
--color-black-hsl: 0 0% 5%; /* #0C0C0C */
--color-black: hsl(var(--color-black-hsl));
--color-orange-hsl: 30 100% 50%; /* #FD7E00 */
--color-orange-hsl: 19 88% 53%; /* #F05E1C */
--color-orange: hsl(var(--color-orange-hsl));
--color-white-hsl: 0 0% 95%; /* #F1F1F1 */
--color-white-hsl: 60 100% 99%; /* #FFFFFC */
--color-white: hsl(var(--color-white-hsl));
/* Font-families */
@ -19,11 +21,11 @@
--font-size-body: 1rem; /* 16px */
/* Spacing */
--space-xs: 0.25rem; /* 4px */
--space-s: 0.5rem; /* 8px */
--space-m: 1rem;
--space-l: 2rem; /* 32px */
--space-xl: 4rem; /* 64px */
--spacing-xs: 0.25rem; /* 4px */
--spacing-s: 0.5rem; /* 8px */
--spacing-m: 1rem;
--spacing-l: 2rem; /* 32px */
--spacing-xl: 4rem; /* 64px */
/* SVGs */
--svg-search-gray: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUyNTI1MiIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
@ -36,16 +38,16 @@
--primary-background-color: var(--color-black);
--primary-font-color: var(--color-white);
--primary-link-color: hsl(var(--color-white-hsl) / 0.5);
--primary-link-hover-color: var(--color-white);
--primary-link-hover-color: var(--color-orange);
}
}
/* Light Mode */
@media (prefers-color-scheme: light) {
:root {
--primary-background-color: var(--color-white);
--primary-background-color: hsl(var(--color-black-hsl) / 0.075);
--primary-font-color: hsl(var(--color-black-hsl) / 0.75);
--primary-link-color: hsl(var(--color-black-hsl) / 0.75);
--primary-link-hover-color: var(--color-orange);
--primary-link-hover-color: var(--color-black);
}
}

BIN
img/traichu-run.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

101
index.html
View File

@ -17,100 +17,107 @@
<link rel="stylesheet" href="css/main.css">
<title>_traichu</title>
</head>
<body onload="dateTime()">
<body onload="traichu()">
<main>
<header>
<section id="date-time">
<h2 class="sr-only">Date &amp; Time</h2>
</section>
<section id="weather">
<h2 class="sr-only">Location &amp; Weather</h2>
</section>
</header>
<section id="traichu">
<header>
<img src="img/traichu-run.png" id="traichu-running" alt="traichu running">
</header>
<h1 class="sr-only">_traichu</h1>
<aside>
<!--SVG generated with Pixels to SVG https://codepen.io/shshaw/pen/XbxvNj-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" shape-rendering="crispEdges"><path d="M7,.5h1m-3,1h3m-4,1h1m1,0h1m6,0h4m4,0h1M3,3.5h1m2,0h1m4,0h2m2,0h1m5,0h1M3,4.5h1m1,0h1m4,0h1m9,0h1m1,0h1M3,5.5h1m1,0h5m5,0h1m4,0h1m1,0h1M2,6.5h1m5,0h1m4,0h3m4,0h1m1,0h1M1,7.5h1m10,0h1m2,0h1m4,0h1m2,0h1M0,8.5H1m10,0h2m7,0h1m2,0h1M0,9.5H2m10,0h1m4,0h3m3,0h1M0,10.5H1m5,0h1m5,0h2m2,0h2m3,0h3M1,11.5h1m3,0h2m6,0h1m2,0h3m2,0h1M2,12.5h1m10,0h2m1,0h1m2,0h1m1,0h1M1,13.5h1m11,0h2m2,0h2m1,0h1M2,14.5h2m8,0h1m1,0h1m3,0h2m-16,1h1m4,0h1m2,0h1m1,0h3m2,0h1m-16,1h1m4,0h1m1,0h1m2,0h1m1,0h3m-16,1h3m4,0h1m3,0h1m-12,1h5m5,0h1m-6,1h3m1,0h2m-5,1h2m2,0h1m-4,1h3" stroke="#000"/><path d="M5,2.5h1m-2,1h2m7,0h2m-11,1h1m6,0h2m-9,1h1m5,0h2m-3,1h2m-2,1h2m3,1h1M2,13.5h1m7,3h1" stroke="#a3500b"/><path d="M13,4.5h2m6,0h1m-10,1h3m6,0h1m-11,1h2m8,0h1m-11,1h1m9,0h2m-2,1h2m-3,1h3m-5,1h3m-2,1h2m-1,1h1" stroke="#f89b11"/><path d="M3,6.5h5m-6,1h7m-7,1H11m-9,1H12M1,10.5H5m2,0h5m-10,1h3m4,0h4m-9,1h3m2,0h4m-7,1h7m-7,1h6m-4,1h1m1,0h1" stroke="#f05e1c"/><path d="M1,8.5h1m3,2h1" stroke="#fff"/><path d="M7,11.5h2m-2,1h2" stroke="#faaf40"/><path d="M3,12.5h1m-1,1h3m7,1h1m-3,1h1m1,0h1m-2,1h2m-3,1h3m-4,1h3m-2,1h1m-1,1h2" stroke="#782f0e"/><path d="M4,14.5h2m-1,1h3m-3,1h4m-3,1h4m-2,1h2" stroke="#f7e1cf"/></svg>
</aside>
<nav id="dock">
<ul>
<li><a href="https://mail.google.com" tabindex="2"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gmail</title><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg></a></li>
<li><a href="https://calendar.google.com" tabindex="3"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google Calendar</title><path d="M18.316 5.684H24v12.632h-5.684V5.684zM5.684 24h12.632v-5.684H5.684V24zM18.316 5.684V0H1.895A1.894 1.894 0 0 0 0 1.895v16.421h5.684V5.684h12.632zm-7.207 6.25v-.065c.272-.144.5-.349.687-.617s.279-.595.279-.982c0-.379-.099-.72-.3-1.025a2.05 2.05 0 0 0-.832-.714 2.703 2.703 0 0 0-1.197-.257c-.6 0-1.094.156-1.481.467-.386.311-.65.671-.793 1.078l1.085.452c.086-.249.224-.461.413-.633.189-.172.445-.257.767-.257.33 0 .602.088.816.264a.86.86 0 0 1 .322.703c0 .33-.12.589-.36.778-.24.19-.535.284-.886.284h-.567v1.085h.633c.407 0 .748.109 1.02.327.272.218.407.499.407.843 0 .336-.129.614-.387.832s-.565.327-.924.327c-.351 0-.651-.103-.897-.311-.248-.208-.422-.502-.521-.881l-1.096.452c.178.616.505 1.082.977 1.401.472.319.984.478 1.538.477a2.84 2.84 0 0 0 1.293-.291c.382-.193.684-.458.902-.794.218-.336.327-.72.327-1.149 0-.429-.115-.797-.344-1.105a2.067 2.067 0 0 0-.881-.689zm2.093-1.931l.602.913L15 10.045v5.744h1.187V8.446h-.827l-2.158 1.557zM22.105 0h-3.289v5.184H24V1.895A1.894 1.894 0 0 0 22.105 0zm-3.289 23.5l4.684-4.684h-4.684V23.5zM0 22.105C0 23.152.848 24 1.895 24h3.289v-5.184H0v3.289z"/></svg></a></li>
<li><a href="https://keep.google.com" tabindex="4"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google Keep</title><path d="M4.908 0c-.904 0-1.635.733-1.635 1.637v20.726c0 .904.732 1.637 1.635 1.637H19.09c.904 0 1.637-.733 1.637-1.637V6.5h-6.5V0H4.908zm9.819 0v6h6l-6-6zM11.97 8.229c.224 0 .571.031.765.072.2.04.576.185.842.312.828.414 1.467 1.164 1.774 2.088.168.511.188 1.34.05 1.865a3.752 3.752 0 0 1-1.277 1.952l-.25.193h-1.87c-2.134 0-1.931.042-2.478-.494a3.349 3.349 0 0 1-.984-1.844c-.148-.766-.053-1.437.32-2.203.19-.399.303-.556.65-.899.68-.679 1.513-1.037 2.458-1.042zm-1.866 7.863h3.781v1.328h-3.779v-1.328z"/></svg></a></li>
<li><a href="https://notion.so" tabindex="5"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Notion</title><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></svg></a></li>
<li><a href="https://github.com" tabindex="6"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a></li>
<li><a href="https://figma.com" tabindex="7"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Figma</title><path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z"/></svg></a></li>
<li><a href="https://soccerstreams.net" tabindex="8"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Premier League</title><path d="M11.176 0s-.681 1.938-.867 2.527C9.844 2.202 8.386 1.194 7.78.775c.14.806.356 2.124.403 2.403-.124-.093-.821-.698-1.875-1.194.589.682 1.008 1.736 1.271 2.588a10.566 10.566 0 0 1 5.238-1.379c.977 0 1.94.14 2.854.403.093-.884.279-1.968.682-2.758-.915.728-1.474 1.503-1.551 1.596-.031-.186-.093-1.52-.17-2.434-.372.403-1.8 2.016-2.063 2.264C12.384 1.938 11.176 0 11.176 0zm1.674 3.86c-1.674 0-3.3.386-4.696 1.115.713.046 1.224.668 1.395 1.164-.558-.45-1.442-.667-1.985-.078-.511.589-.464 1.688.047 2.572-1.193-.605-1.194-2.185-.775-2.867A10.392 10.392 0 0 0 3.61 9.594l1.07.172c-1.24 1.426-2.107 3.953-2.107 5.146l1.75-.543c-.31 1.054-.401 4.602.653 6.385 0 0 1.38-.96 2.945-3.363.65 2.17.356 3.985 0 5.767 2.82 1.581 6.09.696 8.012-.683l.357 1.35c2.248-1.489 3.488-3.628 3.72-6.124l.837.93c1.286-3.829.28-6.883-1.565-9.502l-.078.637-.79-.87s.17-.077.31-.263c.03-.078-.046-.495-.371-.774-.31.078-.56.264-.684.45a3.222 3.222 0 0 0-.93-.543c.062.077.604.79.65 1.007.466.388 1.102.837 1.52 1.395-.34-.403-1.984-.497-2.728-.078 0 0-.744-.868-1.426-1.473-.14-.511.326-.96.326-.96s-.48-.03-.93.42c-.682-.512-1.55-.745-1.55-.745-.961.14-1.612.82-1.612.82.217.14.512.327.776.42.511.217 1.006.139 1.332.139.263 0 .636.078.636.078s.635.495 1.565 1.565c-1.426-.574-2.915.062-3.969-.45-1.24-.62-1.146-1.595-1.146-1.595s-.836-.11-.836-.141c0 0 .618-.82 1.548-1.1l-.464-.402c.558-.465 1.534-1.085 3.115-1.24 0 0 .683.262 2.11 1.285.232-.326.308-1.008.308-1.008.728.248 2.217 1.333 2.806 1.984-.325-.759-.559-1.223-.636-2.013-.357-.357-1.24-1.101-3.069-1.551.295.605.264 1.115.264 1.115-.34-.45-1.055-1.146-1.55-1.332-.295-.015-.605-.047-.93-.047zm3.271 7.068a4.323 4.323 0 0 0 1.256.697v1.348c-.465.403-1.985 1.675-3.008 1.566-.573-1.1-1.115-2.107-1.115-2.107s1.565-1.318 2.867-1.504zm2.975.031c.465 1.131.59 2.48.078 3.379-.28-.605-.636-.947-1.008-1.35v-1.347s.418-.264.93-.682zm-.977 3.395c.465.511.559 1.068.559 1.068-.202 1.131-.836 1.846-1.301 2.14.046-.821-.172-1.519-.172-1.519-.34.372-1.13.743-1.596.836l-.697-1.3c.822-.032 2.201-1.194 2.201-1.194l1.006-.031z"/></svg></a></li>
<li><a href="https://formula1stream.cc" tabindex="9"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>F1</title><path d="M9.6 11.24h7.91L19.75 9H9.39c-2.85 0-3.62.34-5.17 1.81C2.71 12.3 0 15 0 15h3.38c.77-.75 2.2-2.13 2.85-2.75.92-.87 1.37-1.01 3.37-1.01zM20.39 9l-6 6H18l6-6h-3.61zm-3.25 2.61H9.88c-2.22 0-2.6.12-3.55 1.07C5.44 13.57 4 15 4 15h3.15l.75-.75c.49-.49.75-.55 1.78-.55h5.37l2.09-2.09z"/></svg></a></li>
<li><a href="https://mlbstreams.to" tabindex="10"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>MLB</title><path d="M22.003 5.53a1.988 1.988 0 011.99 1.827l.007.177v8.927a2.007 2.007 0 01-1.848 2.002l-.15.006H2.002a2.003 2.003 0 01-1.42-.586 1.979 1.979 0 01-.575-1.245L0 16.46V7.535a1.994 1.994 0 01.583-1.427 2.016 2.016 0 011.242-.57l.176-.007h20.002zm-7.5.703H2.001a1.312 1.312 0 00-.926.375 1.299 1.299 0 00-.374.926v8.927a1.282 1.282 0 00.374.922c.246.245.579.383.926.384h8.116a92.275 92.275 0 00-.495-.843H8.66c0-2.402.812-3.73 1.784-3.995.133-.024.07-.68-.1-.88h-.561c-.09 0-.038-.169-.038-.169l.456-.972-.062-.266H8.455l1.383-.967c.064-2.55 2.68-2.748 4.255-1.686.937.62 1.008 1.849.937 2.698-.012.054-.244.018-.244.018s-.16.937.257.937h1.838c.749-.03 1.472.478 1.472.478l.176-.643-4.026-5.244zm7.5 0h-5.59l3.207 5.36.296.038.187.245v.229l.202.041.188.255v.221l.21.037.211.23v.51c.252.228.536.418.843.563.283.108.315.562.486.803.213.352.505.493.444.69-.143.526-.682 1.414-1.184 1.456h-1.986v.85h2.488a1.3 1.3 0 001.294-1.311V7.534h-.002a1.285 1.285 0 00-1.294-1.3zM4.022 14.404a.888.888 0 01-.638 1.513.879.879 0 01-.88-.888.888.888 0 011.518-.625z"/></svg></a></li>
<li><a href="https://nhlbite.com" tabindex="11"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>NHL</title><path d="M19.35,9.5c.15-.62-.2-1.14-.54-1.47h3.24s-1.44,6.26-1.44,6.26h3.38c-.11,.33-.27,.89-.37,1.7h-5.77l1.5-6.49Z"/><path d="M1.52,9.51c.15-.62-.19-1.14-.53-1.47h3.13s2.07,5.09,2.07,5.09l1.2-5.1h2.31l-1.87,7.96h-2.59l-1.87-4.54-1.07,4.55H0l1.52-6.49Z"/><path d="M10.64,9.51c.14-.63-.2-1.14-.54-1.48h3.24s-.71,3.1-.71,3.1h2.77s.71-3.12,.71-3.12h2.24s-1.83,7.95-1.83,7.95h-2.24l.7-3.08h-2.77s-.7,3.09-.7,3.09h-2.37l1.49-6.46Z"/></svg></a></li>
<li><a href="https://nbabite.com" tabindex="12"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>NBA</title><path d="M9.19 0a2.486 2.486 0 0 0-2.485 2.484v19.029A2.488 2.488 0 0 0 9.19 24h5.615a2.493 2.493 0 0 0 2.49-2.487V2.484A2.488 2.488 0 0 0 14.81 0zm0 .584h3.21c-.62.237-.707.508-.73 1.366-.105.01-.325-.087-.25.434 0 0 .043.346.18.286-.133.918.023.99-.93 1.031l-.047.067c-.95.093-1.25-.027-2.05 1.603 0 0-.207.505-.268.714-.197.415-.674 1.328-.819 1.919-.046.2-.14.264-.01.553.185.417-.124.527.95.496V9.3s-.286.247-.346.398c-.061.147-.226.89-.22 1.237.019.917.767 1.683.992 2.597l.492.07c.282.634 1.495 2.355 1.743 2.582.057.159.365.355.545.551.149.141 1.025 1.1 2.054 1.692-.007-.001.164.344.249.618-.342.275.32.777.52 1.609.012.107-.19.222.114.495-.022 1.256-.402 1.918.241 2.266H9.191a1.9 1.9 0 0 1-1.9-1.901V2.486a1.9 1.9 0 0 1 1.9-1.902zm3.804.002h1.815a1.9 1.9 0 0 1 1.897 1.898v9.193a1.653 1.653 0 0 0-.22-.397c0-.255-.272-.249-.346-.344-.07-.081.067-.128-.407-.235-.09-.05-.158-.747-.158-.747-.07-.447-.229-.754-.467-1.227-.12-.243-.177-1.001-.305-1.386.071-1.767-.493-2.28-.95-2.569-.174-.11-.262-.191-.433-.29l-.005-.082c-.133-.126-.402-.264-.623-.362-.068-.07-.037-.22.01-.276.15-.02.348-.356.513-.703.129.009.174-.118.214-.19.138-.222.288-.413.096-.542.435-.777.154-1.301-.08-1.321-.095-.195-.26-.316-.551-.42zm.551 6.338c.06.319.34 1.929.456 2.187.123.259.535 1.05.73 1.54a1.69 1.69 0 0 0-1.294 1.646 1.692 1.692 0 0 0 1.693 1.691 1.692 1.692 0 0 0 1.576-1.066v8.59a1.887 1.887 0 0 1-1.598 1.877h-.017c.833-.502.319-1.46.16-2.022-.012-.033.014-.074.026-.1.045-.08-.045-.257-.045-.257-.098-.09-.127-.561-.182-.772-.089-.358.157-.971.157-1.18 0-.206-.156-.491-.445-.858-.069-.078-.276-1.86-.462-2.313-.258-.623-.339-.526-.64-1.266-.24-.525-.055-1.295-.59-3.085.005.006.12-.113.12-.113s-.422-1.55-.561-1.975c-.14-.426-.385-.456-.385-.456s.002-.172.012-.216c.02-.07.516-1.367.558-1.407.001-.03.717-.514.731-.445Z"/></svg></a></li>
<li><a href="https://mmastreams.cc/" tabindex="13"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>UFC</title><path d="M6.308 7.843h2.797s-1.86 6.639-1.951 6.998c-.177.69-.353 1.316-2.043 1.316-2.037 0-3.22-.007-3.777 0-.698.007-1.521-.633-1.296-1.464l1.91-6.85H4.8S3.2 13.553 3.166 13.7c-.029.148-.19.557.698.564.64.014.69-.155.803-.564.268-.922 1.64-5.857 1.64-5.857zm10.272 0l-.507 1.824H9.986l.507-1.824zm-8.404 8.314l1.459-5.244h6.086l-.507 1.823h-3.262l-.95 3.421zm11.47-5.385c-.26.957-.493 1.774-.754 2.738-.05.17-.162.416-.127.57.078.367 1.29.226 1.726.226h1.945c-.155.612-.33 1.21-.5 1.81h-4.63c-.676-.064-1.557-.353-1.472-1.226.028-.274.156-.584.24-.887a1189.7 1189.7 0 001.24-4.463c.176-.648.317-1.197.83-1.457.333-.17.861-.218 1.255-.24H24c-.162.606-.331 1.211-.5 1.81h-2.643c-.317 0-.669-.036-.845.084-.19.141-.295.775-.366 1.035z"/></svg></a></li>
<li><a href="https://mail.google.com"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gmail</title><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg></a></li>
<li><a href="https://calendar.google.com"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google Calendar</title><path d="M18.316 5.684H24v12.632h-5.684V5.684zM5.684 24h12.632v-5.684H5.684V24zM18.316 5.684V0H1.895A1.894 1.894 0 0 0 0 1.895v16.421h5.684V5.684h12.632zm-7.207 6.25v-.065c.272-.144.5-.349.687-.617s.279-.595.279-.982c0-.379-.099-.72-.3-1.025a2.05 2.05 0 0 0-.832-.714 2.703 2.703 0 0 0-1.197-.257c-.6 0-1.094.156-1.481.467-.386.311-.65.671-.793 1.078l1.085.452c.086-.249.224-.461.413-.633.189-.172.445-.257.767-.257.33 0 .602.088.816.264a.86.86 0 0 1 .322.703c0 .33-.12.589-.36.778-.24.19-.535.284-.886.284h-.567v1.085h.633c.407 0 .748.109 1.02.327.272.218.407.499.407.843 0 .336-.129.614-.387.832s-.565.327-.924.327c-.351 0-.651-.103-.897-.311-.248-.208-.422-.502-.521-.881l-1.096.452c.178.616.505 1.082.977 1.401.472.319.984.478 1.538.477a2.84 2.84 0 0 0 1.293-.291c.382-.193.684-.458.902-.794.218-.336.327-.72.327-1.149 0-.429-.115-.797-.344-1.105a2.067 2.067 0 0 0-.881-.689zm2.093-1.931l.602.913L15 10.045v5.744h1.187V8.446h-.827l-2.158 1.557zM22.105 0h-3.289v5.184H24V1.895A1.894 1.894 0 0 0 22.105 0zm-3.289 23.5l4.684-4.684h-4.684V23.5zM0 22.105C0 23.152.848 24 1.895 24h3.289v-5.184H0v3.289z"/></svg></a></li>
<li><a href="https://keep.google.com"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google Keep</title><path d="M4.908 0c-.904 0-1.635.733-1.635 1.637v20.726c0 .904.732 1.637 1.635 1.637H19.09c.904 0 1.637-.733 1.637-1.637V6.5h-6.5V0H4.908zm9.819 0v6h6l-6-6zM11.97 8.229c.224 0 .571.031.765.072.2.04.576.185.842.312.828.414 1.467 1.164 1.774 2.088.168.511.188 1.34.05 1.865a3.752 3.752 0 0 1-1.277 1.952l-.25.193h-1.87c-2.134 0-1.931.042-2.478-.494a3.349 3.349 0 0 1-.984-1.844c-.148-.766-.053-1.437.32-2.203.19-.399.303-.556.65-.899.68-.679 1.513-1.037 2.458-1.042zm-1.866 7.863h3.781v1.328h-3.779v-1.328z"/></svg></a></li>
<li><a href="https://notion.so"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Notion</title><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></svg></a></li>
<li><a href="https://github.com"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a></li>
<li><a href="https://figma.com"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Figma</title><path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z"/></svg></a></li>
<li><a href="https://soccerstreams.net"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Premier League</title><path d="M11.176 0s-.681 1.938-.867 2.527C9.844 2.202 8.386 1.194 7.78.775c.14.806.356 2.124.403 2.403-.124-.093-.821-.698-1.875-1.194.589.682 1.008 1.736 1.271 2.588a10.566 10.566 0 0 1 5.238-1.379c.977 0 1.94.14 2.854.403.093-.884.279-1.968.682-2.758-.915.728-1.474 1.503-1.551 1.596-.031-.186-.093-1.52-.17-2.434-.372.403-1.8 2.016-2.063 2.264C12.384 1.938 11.176 0 11.176 0zm1.674 3.86c-1.674 0-3.3.386-4.696 1.115.713.046 1.224.668 1.395 1.164-.558-.45-1.442-.667-1.985-.078-.511.589-.464 1.688.047 2.572-1.193-.605-1.194-2.185-.775-2.867A10.392 10.392 0 0 0 3.61 9.594l1.07.172c-1.24 1.426-2.107 3.953-2.107 5.146l1.75-.543c-.31 1.054-.401 4.602.653 6.385 0 0 1.38-.96 2.945-3.363.65 2.17.356 3.985 0 5.767 2.82 1.581 6.09.696 8.012-.683l.357 1.35c2.248-1.489 3.488-3.628 3.72-6.124l.837.93c1.286-3.829.28-6.883-1.565-9.502l-.078.637-.79-.87s.17-.077.31-.263c.03-.078-.046-.495-.371-.774-.31.078-.56.264-.684.45a3.222 3.222 0 0 0-.93-.543c.062.077.604.79.65 1.007.466.388 1.102.837 1.52 1.395-.34-.403-1.984-.497-2.728-.078 0 0-.744-.868-1.426-1.473-.14-.511.326-.96.326-.96s-.48-.03-.93.42c-.682-.512-1.55-.745-1.55-.745-.961.14-1.612.82-1.612.82.217.14.512.327.776.42.511.217 1.006.139 1.332.139.263 0 .636.078.636.078s.635.495 1.565 1.565c-1.426-.574-2.915.062-3.969-.45-1.24-.62-1.146-1.595-1.146-1.595s-.836-.11-.836-.141c0 0 .618-.82 1.548-1.1l-.464-.402c.558-.465 1.534-1.085 3.115-1.24 0 0 .683.262 2.11 1.285.232-.326.308-1.008.308-1.008.728.248 2.217 1.333 2.806 1.984-.325-.759-.559-1.223-.636-2.013-.357-.357-1.24-1.101-3.069-1.551.295.605.264 1.115.264 1.115-.34-.45-1.055-1.146-1.55-1.332-.295-.015-.605-.047-.93-.047zm3.271 7.068a4.323 4.323 0 0 0 1.256.697v1.348c-.465.403-1.985 1.675-3.008 1.566-.573-1.1-1.115-2.107-1.115-2.107s1.565-1.318 2.867-1.504zm2.975.031c.465 1.131.59 2.48.078 3.379-.28-.605-.636-.947-1.008-1.35v-1.347s.418-.264.93-.682zm-.977 3.395c.465.511.559 1.068.559 1.068-.202 1.131-.836 1.846-1.301 2.14.046-.821-.172-1.519-.172-1.519-.34.372-1.13.743-1.596.836l-.697-1.3c.822-.032 2.201-1.194 2.201-1.194l1.006-.031z"/></svg></a></li>
<li><a href="https://formula1stream.cc"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>F1</title><path d="M9.6 11.24h7.91L19.75 9H9.39c-2.85 0-3.62.34-5.17 1.81C2.71 12.3 0 15 0 15h3.38c.77-.75 2.2-2.13 2.85-2.75.92-.87 1.37-1.01 3.37-1.01zM20.39 9l-6 6H18l6-6h-3.61zm-3.25 2.61H9.88c-2.22 0-2.6.12-3.55 1.07C5.44 13.57 4 15 4 15h3.15l.75-.75c.49-.49.75-.55 1.78-.55h5.37l2.09-2.09z"/></svg></a></li>
<li><a href="https://mlbstreams.to"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>MLB</title><path d="M22.003 5.53a1.988 1.988 0 011.99 1.827l.007.177v8.927a2.007 2.007 0 01-1.848 2.002l-.15.006H2.002a2.003 2.003 0 01-1.42-.586 1.979 1.979 0 01-.575-1.245L0 16.46V7.535a1.994 1.994 0 01.583-1.427 2.016 2.016 0 011.242-.57l.176-.007h20.002zm-7.5.703H2.001a1.312 1.312 0 00-.926.375 1.299 1.299 0 00-.374.926v8.927a1.282 1.282 0 00.374.922c.246.245.579.383.926.384h8.116a92.275 92.275 0 00-.495-.843H8.66c0-2.402.812-3.73 1.784-3.995.133-.024.07-.68-.1-.88h-.561c-.09 0-.038-.169-.038-.169l.456-.972-.062-.266H8.455l1.383-.967c.064-2.55 2.68-2.748 4.255-1.686.937.62 1.008 1.849.937 2.698-.012.054-.244.018-.244.018s-.16.937.257.937h1.838c.749-.03 1.472.478 1.472.478l.176-.643-4.026-5.244zm7.5 0h-5.59l3.207 5.36.296.038.187.245v.229l.202.041.188.255v.221l.21.037.211.23v.51c.252.228.536.418.843.563.283.108.315.562.486.803.213.352.505.493.444.69-.143.526-.682 1.414-1.184 1.456h-1.986v.85h2.488a1.3 1.3 0 001.294-1.311V7.534h-.002a1.285 1.285 0 00-1.294-1.3zM4.022 14.404a.888.888 0 01-.638 1.513.879.879 0 01-.88-.888.888.888 0 011.518-.625z"/></svg></a></li>
<li><a href="https://nhlbite.com"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>NHL</title><path d="M19.35,9.5c.15-.62-.2-1.14-.54-1.47h3.24s-1.44,6.26-1.44,6.26h3.38c-.11,.33-.27,.89-.37,1.7h-5.77l1.5-6.49Z"/><path d="M1.52,9.51c.15-.62-.19-1.14-.53-1.47h3.13s2.07,5.09,2.07,5.09l1.2-5.1h2.31l-1.87,7.96h-2.59l-1.87-4.54-1.07,4.55H0l1.52-6.49Z"/><path d="M10.64,9.51c.14-.63-.2-1.14-.54-1.48h3.24s-.71,3.1-.71,3.1h2.77s.71-3.12,.71-3.12h2.24s-1.83,7.95-1.83,7.95h-2.24l.7-3.08h-2.77s-.7,3.09-.7,3.09h-2.37l1.49-6.46Z"/></svg></a></li>
<li><a href="https://nbabite.com"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>NBA</title><path d="M9.19 0a2.486 2.486 0 0 0-2.485 2.484v19.029A2.488 2.488 0 0 0 9.19 24h5.615a2.493 2.493 0 0 0 2.49-2.487V2.484A2.488 2.488 0 0 0 14.81 0zm0 .584h3.21c-.62.237-.707.508-.73 1.366-.105.01-.325-.087-.25.434 0 0 .043.346.18.286-.133.918.023.99-.93 1.031l-.047.067c-.95.093-1.25-.027-2.05 1.603 0 0-.207.505-.268.714-.197.415-.674 1.328-.819 1.919-.046.2-.14.264-.01.553.185.417-.124.527.95.496V9.3s-.286.247-.346.398c-.061.147-.226.89-.22 1.237.019.917.767 1.683.992 2.597l.492.07c.282.634 1.495 2.355 1.743 2.582.057.159.365.355.545.551.149.141 1.025 1.1 2.054 1.692-.007-.001.164.344.249.618-.342.275.32.777.52 1.609.012.107-.19.222.114.495-.022 1.256-.402 1.918.241 2.266H9.191a1.9 1.9 0 0 1-1.9-1.901V2.486a1.9 1.9 0 0 1 1.9-1.902zm3.804.002h1.815a1.9 1.9 0 0 1 1.897 1.898v9.193a1.653 1.653 0 0 0-.22-.397c0-.255-.272-.249-.346-.344-.07-.081.067-.128-.407-.235-.09-.05-.158-.747-.158-.747-.07-.447-.229-.754-.467-1.227-.12-.243-.177-1.001-.305-1.386.071-1.767-.493-2.28-.95-2.569-.174-.11-.262-.191-.433-.29l-.005-.082c-.133-.126-.402-.264-.623-.362-.068-.07-.037-.22.01-.276.15-.02.348-.356.513-.703.129.009.174-.118.214-.19.138-.222.288-.413.096-.542.435-.777.154-1.301-.08-1.321-.095-.195-.26-.316-.551-.42zm.551 6.338c.06.319.34 1.929.456 2.187.123.259.535 1.05.73 1.54a1.69 1.69 0 0 0-1.294 1.646 1.692 1.692 0 0 0 1.693 1.691 1.692 1.692 0 0 0 1.576-1.066v8.59a1.887 1.887 0 0 1-1.598 1.877h-.017c.833-.502.319-1.46.16-2.022-.012-.033.014-.074.026-.1.045-.08-.045-.257-.045-.257-.098-.09-.127-.561-.182-.772-.089-.358.157-.971.157-1.18 0-.206-.156-.491-.445-.858-.069-.078-.276-1.86-.462-2.313-.258-.623-.339-.526-.64-1.266-.24-.525-.055-1.295-.59-3.085.005.006.12-.113.12-.113s-.422-1.55-.561-1.975c-.14-.426-.385-.456-.385-.456s.002-.172.012-.216c.02-.07.516-1.367.558-1.407.001-.03.717-.514.731-.445Z"/></svg></a></li>
<li><a href="https://mmastreams.cc"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>UFC</title><path d="M6.308 7.843h2.797s-1.86 6.639-1.951 6.998c-.177.69-.353 1.316-2.043 1.316-2.037 0-3.22-.007-3.777 0-.698.007-1.521-.633-1.296-1.464l1.91-6.85H4.8S3.2 13.553 3.166 13.7c-.029.148-.19.557.698.564.64.014.69-.155.803-.564.268-.922 1.64-5.857 1.64-5.857zm10.272 0l-.507 1.824H9.986l.507-1.824zm-8.404 8.314l1.459-5.244h6.086l-.507 1.823h-3.262l-.95 3.421zm11.47-5.385c-.26.957-.493 1.774-.754 2.738-.05.17-.162.416-.127.57.078.367 1.29.226 1.726.226h1.945c-.155.612-.33 1.21-.5 1.81h-4.63c-.676-.064-1.557-.353-1.472-1.226.028-.274.156-.584.24-.887a1189.7 1189.7 0 001.24-4.463c.176-.648.317-1.197.83-1.457.333-.17.861-.218 1.255-.24H24c-.162.606-.331 1.211-.5 1.81h-2.643c-.317 0-.669-.036-.845.084-.19.141-.295.775-.366 1.035z"/></svg></a></li>
</ul>
</nav>
<section id="search">
<h2 class="sr-only">Search</h2>
<form action="https://duckduckgo.com/" method="get">
<input type="text" id="q" name="q" tabindex="1" autofocus>
<input type="text" id="q" name="q" autofocus>
<button hidden>Search</button>
</form>
</section>
<nav id="bookmarks">
<section id="bookmarks">
<h2 class="sr-only">Bookmarks</h2>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/news.ycombinator.com.ico" class="favicon" alt="HackerNews favicon">
<a href="https://news.ycombinator.com">HackerNews</a>
<a href="https://news.ycombinator.com"><img src="https://icons.duckduckgo.com/ip3/news.ycombinator.com.ico" class="favicon" alt="HackerNews favicon">HackerNews</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/reddit.com.ico" class="favicon" alt="Reddit favicon">
<a href="https://www.reddit.com">Reddit</a>
<a href="https://www.reddit.com"><img src="https://icons.duckduckgo.com/ip3/reddit.com.ico" class="favicon" alt="Reddit favicon">Reddit</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/twitter.com.ico" class="favicon" alt="Twitter favicon">
<a href="https://twitter.com">Twitter</a>
<a href="https://twitter.com"><img src="https://icons.duckduckgo.com/ip3/twitter.com.ico" class="favicon" alt="Twitter favicon">Twitter</a>
</li>
<li>
<img src="https://b.cafeinado.com/themes/vanilla/styles/default/favicon.ico" class="favicon" alt="b.dot favicon">
<a href="http://b.cafeinado.com">b.dot</a>
<a href="http://b.cafeinado.com"><img src="https://b.cafeinado.com/themes/vanilla/styles/default/favicon.ico" class="favicon" alt="b.dot favicon">b.dot</a>
</li>
</ul>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/apnews.com.ico" class="favicon" alt="Associated Press favicon">
<a href="https://apnews.com">Associated Press</a>
<a href="https://apnews.com"><img src="https://icons.duckduckgo.com/ip3/apnews.com.ico" class="favicon" alt="Associated Press favicon">Associated Press</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/reuters.com.ico" class="favicon" alt="Reuters favicon">
<a href="https://www.reuters.com">Reuters</a>
<a href="https://www.reuters.com"><img src="https://icons.duckduckgo.com/ip3/reuters.com.ico" class="favicon" alt="Reuters favicon">Reuters</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/supercluster.com.ico" class="favicon" alt="Supercluster favicon">
<a href="https://www.supercluster.com">Supercluster</a>
<a href="https://www.supercluster.com"><img src="https://icons.duckduckgo.com/ip3/supercluster.com.ico" class="favicon" alt="Supercluster favicon">Supercluster</a>
</li>
<li>
<a href="https://www.smithsonianmag.com"><img src="https://icons.duckduckgo.com/ip3/smithsonianmag.org.ico" class="favicon" alt="Smithsonian Magazine favicon">Smithsonian Magazine</a>
</li>
<li>
<a href="https://publicdomainreview.org"><img src="https://icons.duckduckgo.com/ip3/publicdomainreview.org.ico" class="favicon" alt="The Public Domain Review favicon">Public Domain Review</a>
</li>
</ul>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/plex.tv.ico" class="favicon" alt="Plex favicon">
<a href="https://app.plex.tv">Plex</a>
<a href="https://app.plex.tv"><img src="https://icons.duckduckgo.com/ip3/plex.tv.ico" class="favicon" alt="Plex favicon">Plex</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/youtube.com.ico" class="favicon" alt="YouTube favicon">
<a href="https://www.youtube.com">YouTube</a>
<a href="https://www.youtube.com"><img src="https://icons.duckduckgo.com/ip3/youtube.com.ico" class="favicon" alt="YouTube favicon">YouTube</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/spotify.com.ico" class="favicon" alt="Spotify favicon">
<a href="https://open.spotify.com">Spotify</a>
<a href="https://www.twitch.tv"><img src="https://icons.duckduckgo.com/ip3/twitch.tv.ico" class="favicon" alt="Twitch favicon">Twitch</a>
</li>
<li>
<a href="https://open.spotify.com"><img src="https://icons.duckduckgo.com/ip3/spotify.com.ico" class="favicon" alt="Spotify favicon">Spotify</a>
</li>
</ul>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/cardsphere.com.ico" class="favicon" alt="Cardsphere favicon">
<a href="https://www.cardsphere.com">Cardsphere</a>
<a href="https://www.cardsphere.com"><img src="https://icons.duckduckgo.com/ip3/cardsphere.com.ico" class="favicon" alt="Cardsphere favicon">Cardsphere</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/cubecobra.com.ico" class="favicon" alt="CubeCobra favicon">
<a href="https://cubecobra.com">Cube Cobra</a>
<a href="https://cubecobra.com"><img src="https://icons.duckduckgo.com/ip3/cubecobra.com.ico" class="favicon" alt="CubeCobra favicon">Cube Cobra</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/deckbox.org.ico" class="favicon" alt="Deckbox favicon">
<a href="https://deckbox.org">Deckbox</a>
<a href="https://deckbox.org"><img src="https://icons.duckduckgo.com/ip3/deckbox.org.ico" class="favicon" alt="Deckbox favicon">Deckbox</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/moxfield.com.ico" class="favicon" alt="Moxfield favicon">
<a href="https://www.moxfield.com">Moxfield</a>
<a href="https://www.moxfield.com"><img src="https://icons.duckduckgo.com/ip3/moxfield.com.ico" class="favicon" alt="Moxfield favicon">Moxfield</a>
</li>
</ul>
</nav>
</section>
</section>
</main>
</body>

65
js/main.js
View File

@ -1,46 +1,27 @@
function dateTime () {
const date = new Date()
let today = date.toDateString()
let time = date.toLocaleTimeString()
document.getElementsByName('q')[0].placeholder = today + ' ' + time
setTimeout(dateTime, 1000)
function dateTime() {
const date = new Date();
let today = date.toDateString();
let time = date.toLocaleTimeString();
document.getElementById('date-time').innerHTML = '<p id="date">' + today + '</p><p id="time">' + time + '</p>';
setTimeout(dateTime, 1000);
}
var konamiCode = [
'ArrowUp',
'ArrowUp',
'ArrowDown',
'ArrowDown',
'ArrowLeft',
'ArrowRight',
'ArrowLeft',
'ArrowRight',
'b',
'a'
]
var currentKey = 0
var keyHandler = function (event) {
// If the key isn't in the pattern, or isn't the current key in the pattern, reset
if (
konamiCode.indexOf(event.key) < 0 ||
event.key !== konamiCode[currentKey]
) {
currentKey = 0
return
}
// Update how much of the pattern is complete
currentKey++
// If complete, add animation class and reset
if (konamiCode.length === currentKey) {
currentKey = 0
document.getElementById('traichu-running').classList.add('slide')
setTimeout(function () {
document.getElementById('traichu-running').classList.remove('slide')
}, 4250)
}
function weatherBalloon(cityID) {
var apiKey = 'fad9628260a1bc2ebaaf85a7dfe800d0';
fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID + '&appid=' + apiKey)
.then(function(resp) {
return resp.json()
})
.then(function(data) {
let weatherIcon = data.weather[0].icon;
let tempK = parseFloat(data.main.temp);
let tempC = Math.round(tempK - 273.15);
let tempF = Math.round((tempK - 273.15) * 1.8) + 32;
document.getElementById('weather').innerHTML = '<p id="location">' + data.name + '</p><p id="details" ' + 'title="' + tempF + '&deg;F">' + '<img src="http://openweathermap.org/img/wn/' + weatherIcon + '@2x.png">' + data.weather[0].description + '<span class="separator">|</span>' + tempC + '&deg;C</p>';
});
}
// Listen for keydown events
document.addEventListener('keydown', keyHandler, false)
function traichu() {
dateTime();
weatherBalloon(6254926);
}