mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-10 10:11:46 +00:00
GH page
This commit is contained in:
TC
BIN
docs/favicon/favicon.ico
Normal file
BIN
docs/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 B |
BIN
docs/favicon/favicon_144.png
Normal file
BIN
docs/favicon/favicon_144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
docs/favicon/favicon_32.png
Normal file
BIN
docs/favicon/favicon_32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 B |
BIN
docs/favicon/favicon_48.png
Normal file
BIN
docs/favicon/favicon_48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 493 B |
BIN
docs/favicon/favicon_96.png
Normal file
BIN
docs/favicon/favicon_96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 860 B |
1
docs/img/adblock.svg
Normal file
1
docs/img/adblock.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><g transform="translate(183.604 196.396)" stroke="#fff" stroke-width="2.23"><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;block-progression:tb;marker:none" d="M-116.99 106.245l31.82 31.82 236.31-236.31-31.82-31.82z" color="#000" font-weight="400" font-family="Sans" overflow="visible" fill="#fff" stroke="none"/><circle r="171.304" cy="4" cx="16" fill="none" stroke-width="44.6"/></g></svg>
|
||||
|
After Width: | Height: | Size: 552 B |
1
docs/img/bg-bottom.svg
Normal file
1
docs/img/bg-bottom.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="1440" height="347" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#0B0D19" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M177.486 208.219c78.18 89.285 218.65-81.067 218.65-119.337 0-38.27-86.408-69.295-193-69.295-106.59 0-193 31.024-193 69.295 0 38.27 89.17 30.051 167.35 119.337z" transform="rotate(6 -140.175 3980.948)" fill="url(#a)"/><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 321.92 -247.724)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 338.741 -285.505)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
docs/img/bg-top.svg
Normal file
1
docs/img/bg-top.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="1440" height="318" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="38.706%" y1="-187.115%" x2="18.675%" y2="110.984%" id="a"><stop stop-color="#FFF" stop-opacity="0" offset="0%"/><stop stop-color="#c3352e" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="d"><stop stop-color="#0B0D19" stop-opacity=".32" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient><filter id="b"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M88.494 90c67.04 7.177 161.094-24.753 224.996-90H.2c25.3 48.079 42.361 85.083 88.294 90z" transform="translate(1051)" fill="url(#a)" filter="url(#b)"/><path d="M250.464 367.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#c)" transform="rotate(143 810.285 354.367)"/><path d="M373.408 256.178c88.026 32.429 156-25.04 156-55.929 0-30.888-69.843-55.929-156-55.929-86.156 0-156 25.04-156 55.93 0 30.888 67.975 23.5 156 55.928z" fill="url(#d)" transform="rotate(136 905.21 332.676)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
docs/img/code.svg
Normal file
1
docs/img/code.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="96" height="48" xmlns="http://www.w3.org/2000/svg"><text y="35" x="48" fill="#fff" stroke-width="0" font-size="36" font-family="Monospace" text-anchor="middle" stroke="#fff"></></text></svg>
|
||||
|
After Width: | Height: | Size: 208 B |
1
docs/img/download.svg
Normal file
1
docs/img/download.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="style-scope yt-icon" style="width:100%;height:100%" pointer-events="none" display="block" fill="#fff"><g class="style-scope yt-icon"><path d="M25.462 19.105v6.848H4.515v-6.848H.489v8.861c0 1.111.9 2.012 2.016 2.012h24.967c1.115 0 2.016-.9 2.016-2.012v-8.861h-4.026zM14.62 18.426l-5.764-6.965s-.877-.828.074-.828h3.248V9.217.494S12.049 0 12.793 0h4.572c.536 0 .524.416.524.416V10.424h2.998c1.154 0 .285.867.285.867s-4.904 6.51-5.588 7.193c-.492.495-.964-.058-.964-.058z" class="style-scope yt-icon"/></g></svg>
|
||||
|
After Width: | Height: | Size: 576 B |
1
docs/img/footer.svg
Normal file
1
docs/img/footer.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="1440" height="582" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#363636" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#363636" offset="0%"/><stop stop-color="#363636" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.93%" gradientTransform="matrix(.24796 -.96592 .92535 .25883 -.151 .643)" id="c"><stop stop-color="#c3352e" stop-opacity="0" offset="0%"/><stop stop-color="#c3352e" stop-opacity=".64" offset="51.712%"/><stop stop-color="#c3352e" stop-opacity=".24" offset="100%"/></radialGradient><filter id="d"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 -272.272 -82.087)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 -255.451 -119.868)"/><path d="M103.064 315.218c128.156 12.998 192.38 157.059 218.627 106.632 26.247-50.427-44.059-106.456 60.397-202.707 104.457-96.252-143.2-285.785-172.392-122.551C180.503 259.825-25.091 302.22 103.064 315.218z" transform="translate(1176 -33)" fill="url(#c)" filter="url(#d)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
docs/img/plugins.svg
Normal file
1
docs/img/plugins.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="#fff"><path d="M45.563 29.174l-22-15A1 1 0 0022 15v30a.999.999 0 001.563.826l22-15a1 1 0 000-1.652zM24 43.107V16.893L43.225 30 24 43.107z"/><path d="M30 0C13.458 0 0 13.458 0 30s13.458 30 30 30 30-13.458 30-30S46.542 0 30 0zm0 58C14.561 58 2 45.439 2 30S14.561 2 30 2s28 12.561 28 28-12.561 28-28 28z"/></svg>
|
||||
|
After Width: | Height: | Size: 375 B |
BIN
docs/img/youtube-music.png
Normal file
BIN
docs/img/youtube-music.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
1
docs/img/youtube-music.svg
Normal file
1
docs/img/youtube-music.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176" width="32" height="32"><circle fill="red" cx="88" cy="88" r="88"/><path fill="#FFF" d="M88 46c23.1 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42 18.9-42 42-42m0-4c-25.4 0-46 20.6-46 46s20.6 46 46 46 46-20.6 46-46-20.6-46-46-46z"/><path fill="#FFF" d="M72 111l39-24-39-22z"/></svg>
|
||||
|
After Width: | Height: | Size: 341 B |
495
docs/index.html
Normal file
495
docs/index.html
Normal file
@ -0,0 +1,495 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>YouTube Music Desktop App (Unofficial)</title>
|
||||
<link
|
||||
rel="icon"
|
||||
href="./favicon/favicon.ico"
|
||||
sizes="16x16"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="./favicon/favicon_32.png"
|
||||
sizes="32x32"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="./favicon/favicon_48.png"
|
||||
sizes="48x48"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="./favicon/favicon_96.png"
|
||||
sizes="96x96"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="./favicon/favicon_144.png"
|
||||
sizes="144x144"
|
||||
type="image/png"
|
||||
/>
|
||||
|
||||
<meta name="theme-color" content="#131313" />
|
||||
<meta
|
||||
name="description"
|
||||
content="YouTube Music Unofficial Desktop App with built-in ad blocker and downloader"
|
||||
/>
|
||||
<meta
|
||||
property="og:site_name"
|
||||
content="YouTube Music Desktop App"
|
||||
/>
|
||||
<meta
|
||||
property="og:url"
|
||||
class="meta-url"
|
||||
content="https://th-ch.github.io/youtube-music"
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta
|
||||
name="twitter:url"
|
||||
class="meta-url"
|
||||
content="https://th-ch.github.io/youtube-music"
|
||||
/>
|
||||
|
||||
<link href="./style/fonts.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./style/style.css" />
|
||||
<script src="https://unpkg.com/scrollreveal"></script>
|
||||
</head>
|
||||
<body class="has-animations vsc-initialized" style="height: 100%;">
|
||||
<div class="body-wrap boxed-container">
|
||||
<header class="site-header text-light">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand header-brand">
|
||||
<h1 class="m-0">
|
||||
<a href="https://github.com/th-ch/youtube-music">
|
||||
<img
|
||||
class="header-logo-image"
|
||||
src="./img/youtube-music.svg"
|
||||
alt="YouTube Music"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero text-center text-light">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-particles-container">
|
||||
<canvas
|
||||
id="hero-particles"
|
||||
width="2558"
|
||||
height="1478"
|
||||
style="width: 1279px; height: 739px;"
|
||||
></canvas>
|
||||
</div>
|
||||
<div class="container-sm">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-copy">
|
||||
<h1 class="hero-title mt-0">
|
||||
Custom YouTube Music Desktop App
|
||||
</h1>
|
||||
<p class="hero-paragraph">
|
||||
Open source, cross-platform, unofficial YouTube Music Desktop
|
||||
App with built-in <strong>ad blocker</strong> and
|
||||
<strong>downloader</strong>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile"
|
||||
href="https://github.com/th-ch/youtube-music/releases/latest"
|
||||
>Download</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup-container">
|
||||
<div class="mockup-bg">
|
||||
<img
|
||||
src="./img/youtube-music.png"
|
||||
id="mockup-header-img"
|
||||
alt="YouTube Music"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-extended section">
|
||||
<div class="features-extended-inner section-inner">
|
||||
<div class="features-extended-wrap">
|
||||
<div class="container">
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<img
|
||||
class="device-mockup"
|
||||
src="./img/adblock.svg"
|
||||
width="100px"
|
||||
alt="Adblocker"
|
||||
data-sr-id="0"
|
||||
style="
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="feature-extended-body"
|
||||
data-sr-id="5"
|
||||
style="
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
>
|
||||
<h3 class="mt-0 mb-16">Built-in adblocker</h3>
|
||||
<p class="m-0">Block all ads and tracking out of the box</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<img
|
||||
class="device-mockup"
|
||||
src="./img/download.svg"
|
||||
alt="Downloader"
|
||||
data-sr-id="2"
|
||||
style="
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="feature-extended-body"
|
||||
data-sr-id="6"
|
||||
style="
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
>
|
||||
<h3 class="mt-0 mb-16">Built-in downloader</h3>
|
||||
<p class="m-0">
|
||||
Download (like youtube-dl) to custom formats (mp3, opus,
|
||||
etc) directly from the interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<img
|
||||
class="device-mockup"
|
||||
src="./img/plugins.svg"
|
||||
alt="Plugins"
|
||||
data-sr-id="3"
|
||||
style="
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="feature-extended-body"
|
||||
data-sr-id="7"
|
||||
style="
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
>
|
||||
<h3 class="mt-0 mb-16">Many other plugins in one click</h3>
|
||||
<p class="m-0">
|
||||
Enhance your user experience with media keys, integrations
|
||||
(Discord), cosmetic filters, notifications, TouchBar,
|
||||
auto-unpause and many more! Every plugin can be enabled or
|
||||
disabled in one click.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-extended">
|
||||
<div class="feature-extended-image">
|
||||
<img
|
||||
class="device-mockup"
|
||||
src="./img/code.svg"
|
||||
alt="Code"
|
||||
data-sr-id="4"
|
||||
style="
|
||||
visibility: visible;
|
||||
width: 200%;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="feature-extended-body"
|
||||
data-sr-id="8"
|
||||
style="
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: matrix3d(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
);
|
||||
transition: opacity 0.6s
|
||||
cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
|
||||
transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
||||
"
|
||||
>
|
||||
<h3 class="mt-0 mb-16">Open source & Cross platform</h3>
|
||||
<p class="m-0">
|
||||
Available for Windows (installer and portable), Mac and
|
||||
Linux (AppImage, deb, etc)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-particles-container">
|
||||
<canvas id="main-particles"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-particles-container">
|
||||
<canvas id="footer-particles"></canvas>
|
||||
</div>
|
||||
<div class="site-footer-top">
|
||||
<section class="cta section text-light">
|
||||
<div class="container-sm">
|
||||
<div class="cta-inner section-inner">
|
||||
<div class="cta-header text-center">
|
||||
<h2 class="section-title mt-0">Download and/or contribute</h2>
|
||||
<p class="section-paragraph">Pull requests welcome!</p>
|
||||
<div class="cta-cta">
|
||||
<a
|
||||
class="button button-primary button-wide-mobile"
|
||||
href="https://github.com/th-ch/youtube-music"
|
||||
>Go to code</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="site-footer-bottom">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="brand footer-brand">
|
||||
<a href="https://github.com/th-ch/youtube-music">
|
||||
<img src="./img/youtube-music.svg" alt="YouTube Music logo" />
|
||||
</a>
|
||||
</div>
|
||||
<ul class="footer-links list-reset">
|
||||
<li>
|
||||
<a href="https://github.com/th-ch/youtube-music">Main page</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/th-ch/youtube-music/issues"
|
||||
>Issues</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/th-ch/youtube-music/pulls"
|
||||
>Pull requests</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="footer-social-links list-reset">
|
||||
<li>
|
||||
<a href="https://github.com/th-ch/youtube-music">
|
||||
<span class="screen-reader-text">GitHub</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 1792 1792"
|
||||
>
|
||||
<path
|
||||
d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="footer-copyright">© 2021 th-ch</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
262
docs/js/main.js
Normal file
262
docs/js/main.js
Normal file
@ -0,0 +1,262 @@
|
||||
// Constants
|
||||
const element = document.documentElement,
|
||||
body = document.body,
|
||||
revealOnScroll = (window.sr = ScrollReveal({ mobile: false }));
|
||||
|
||||
// Load animations
|
||||
element.classList.remove("no-js");
|
||||
element.classList.add("js");
|
||||
window.addEventListener("load", function () {
|
||||
body.classList.add("is-loaded");
|
||||
});
|
||||
|
||||
if (body.classList.contains("has-animations")) {
|
||||
window.addEventListener("load", function () {
|
||||
revealOnScroll.reveal(".feature-extended .device-mockup", {
|
||||
duration: 600,
|
||||
distance: "100px",
|
||||
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
||||
origin: "bottom",
|
||||
viewFactor: 0.6,
|
||||
});
|
||||
revealOnScroll.reveal(".feature-extended .feature-extended-body", {
|
||||
duration: 600,
|
||||
distance: "40px",
|
||||
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
||||
origin: "top",
|
||||
viewFactor: 0.6,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Bubble canvas
|
||||
let bubbleCanvas = function (t) {
|
||||
let e = this;
|
||||
e.parentNode = t;
|
||||
e.setCanvasSize();
|
||||
window.addEventListener("resize", function () {
|
||||
e.setCanvasSize();
|
||||
});
|
||||
e.mouseX = 0;
|
||||
e.mouseY = 0;
|
||||
window.addEventListener("mousemove", function (t) {
|
||||
(e.mouseX = t.clientX), (e.mouseY = t.clientY);
|
||||
});
|
||||
e.randomise();
|
||||
};
|
||||
|
||||
bubbleCanvas.prototype.setCanvasSize = function () {
|
||||
this.canvasWidth = this.parentNode.clientWidth;
|
||||
this.canvasHeight = this.parentNode.clientHeight;
|
||||
};
|
||||
|
||||
bubbleCanvas.prototype.generateDecimalBetween = function (start, end) {
|
||||
return (Math.random() * (start - end) + end).toFixed(2);
|
||||
};
|
||||
|
||||
bubbleCanvas.prototype.update = function () {
|
||||
let t = this;
|
||||
t.translateX = t.translateX - t.movementX;
|
||||
t.translateY = t.translateY - t.movementY;
|
||||
t.posX += (t.mouseX / (t.staticity / t.magnetism) - t.posX) / t.smoothFactor;
|
||||
t.posY += (t.mouseY / (t.staticity / t.magnetism) - t.posY) / t.smoothFactor;
|
||||
if (
|
||||
t.translateY + t.posY < 0 ||
|
||||
t.translateX + t.posX < 0 ||
|
||||
t.translateX + t.posX > t.canvasWidth
|
||||
) {
|
||||
t.randomise();
|
||||
t.translateY = t.canvasHeight;
|
||||
}
|
||||
};
|
||||
|
||||
bubbleCanvas.prototype.randomise = function () {
|
||||
this.colors = ["195,53,46", "172,54,46"];
|
||||
|
||||
this.velocity = 20;
|
||||
this.smoothFactor = 50;
|
||||
this.staticity = 30;
|
||||
this.magnetism = 0.1 + 4 * Math.random();
|
||||
this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
|
||||
this.alpha = this.generateDecimalBetween(5, 10) / 10;
|
||||
this.size = this.generateDecimalBetween(1, 4);
|
||||
this.posX = 0;
|
||||
this.posY = 0;
|
||||
this.movementX = this.generateDecimalBetween(-2, 2) / this.velocity;
|
||||
this.movementY = this.generateDecimalBetween(1, 20) / this.velocity;
|
||||
this.translateX = this.generateDecimalBetween(0, this.canvasWidth);
|
||||
this.translateY = this.generateDecimalBetween(0, this.canvasHeight);
|
||||
};
|
||||
|
||||
let drawBubbleCanvas = function (t) {
|
||||
this.canvas = document.getElementById(t);
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.dpr = window.devicePixelRatio;
|
||||
};
|
||||
|
||||
drawBubbleCanvas.prototype.start = function (bubbleDensity) {
|
||||
let t = this;
|
||||
t.bubbleDensity = bubbleDensity;
|
||||
t.setCanvasSize();
|
||||
window.addEventListener("resize", function () {
|
||||
t.setCanvasSize();
|
||||
});
|
||||
t.bubblesList = [];
|
||||
t.generateBubbles();
|
||||
t.animate();
|
||||
};
|
||||
|
||||
drawBubbleCanvas.prototype.setCanvasSize = function () {
|
||||
this.container = this.canvas.parentNode;
|
||||
this.w = this.container.offsetWidth;
|
||||
this.h = this.container.offsetHeight;
|
||||
this.wdpi = this.w * this.dpr;
|
||||
this.hdpi = this.h * this.dpr;
|
||||
this.canvas.width = this.wdpi;
|
||||
this.canvas.height = this.hdpi;
|
||||
this.canvas.style.width = this.w + "px";
|
||||
this.canvas.style.height = this.h + "px";
|
||||
this.ctx.scale(this.dpr, this.dpr);
|
||||
};
|
||||
|
||||
drawBubbleCanvas.prototype.animate = function () {
|
||||
let t = this;
|
||||
t.ctx.clearRect(0, 0, t.canvas.clientWidth, t.canvas.clientHeight);
|
||||
t.bubblesList.forEach(function (e) {
|
||||
e.update();
|
||||
t.ctx.translate(e.translateX, e.translateY);
|
||||
t.ctx.beginPath();
|
||||
t.ctx.arc(e.posX, e.posY, e.size, 0, 2 * Math.PI);
|
||||
t.ctx.fillStyle = "rgba(" + e.color + "," + e.alpha + ")";
|
||||
t.ctx.fill();
|
||||
t.ctx.setTransform(t.dpr, 0, 0, t.dpr, 0, 0);
|
||||
});
|
||||
requestAnimationFrame(this.animate.bind(this));
|
||||
};
|
||||
|
||||
drawBubbleCanvas.prototype.addBubble = function (t) {
|
||||
return this.bubblesList.push(t);
|
||||
};
|
||||
|
||||
drawBubbleCanvas.prototype.generateBubbles = function () {
|
||||
let t = this;
|
||||
for (let e = 0; e < t.bubbleDensity; e++)
|
||||
t.addBubble(new bubbleCanvas(t.canvas.parentNode));
|
||||
};
|
||||
|
||||
// Night sky with stars canvas
|
||||
let starCanvas = function (t) {
|
||||
this.canvas = document.getElementById(t);
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.dpr = window.devicePixelRatio;
|
||||
};
|
||||
|
||||
starCanvas.prototype.start = function () {
|
||||
let w;
|
||||
let h;
|
||||
|
||||
const setCanvasExtents = () => {
|
||||
w = document.body.clientWidth;
|
||||
h = document.body.clientHeight;
|
||||
this.canvas.width = w;
|
||||
this.canvas.height = h;
|
||||
};
|
||||
|
||||
setCanvasExtents();
|
||||
|
||||
window.onresize = () => {
|
||||
setCanvasExtents();
|
||||
};
|
||||
|
||||
const makeStars = (count) => {
|
||||
const out = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = {
|
||||
x: Math.random() * w - w / 2,
|
||||
y: Math.random() * h - h / 2,
|
||||
z: Math.random() * 1000,
|
||||
};
|
||||
out.push(s);
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
let stars = makeStars(10000);
|
||||
|
||||
const clear = () => {
|
||||
this.ctx.fillStyle = "#212121";
|
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
};
|
||||
|
||||
const putPixel = (x, y, brightness) => {
|
||||
const intensity = brightness * 255;
|
||||
const rgb = "rgb(" + intensity + "," + intensity + "," + intensity + ")";
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(x, y, 0.9, 0, 2 * Math.PI);
|
||||
this.ctx.fillStyle = rgb;
|
||||
this.ctx.fill();
|
||||
};
|
||||
|
||||
const moveStars = (distance) => {
|
||||
const count = stars.length;
|
||||
for (var i = 0; i < count; i++) {
|
||||
const s = stars[i];
|
||||
s.z -= distance;
|
||||
while (s.z <= 1) {
|
||||
s.z += 1000;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let prevTime;
|
||||
const init = (time) => {
|
||||
prevTime = time;
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
const tick = (time) => {
|
||||
let elapsed = time - prevTime;
|
||||
prevTime = time;
|
||||
|
||||
moveStars(elapsed * 0.1);
|
||||
|
||||
clear();
|
||||
|
||||
const cx = w / 2;
|
||||
const cy = h / 2;
|
||||
|
||||
const count = stars.length;
|
||||
for (var i = 0; i < count; i++) {
|
||||
const star = stars[i];
|
||||
|
||||
const x = cx + star.x / (star.z * 0.001);
|
||||
const y = cy + star.y / (star.z * 0.001);
|
||||
|
||||
if (x < 0 || x >= w || y < 0 || y >= h) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const d = star.z / 1000.0;
|
||||
const b = 1 - d * d;
|
||||
|
||||
putPixel(x, y, b);
|
||||
}
|
||||
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
requestAnimationFrame(init);
|
||||
};
|
||||
|
||||
// Start canvas animations
|
||||
window.addEventListener("load", function () {
|
||||
// Stars
|
||||
const headCanvas = new starCanvas("hero-particles");
|
||||
// Bubbles
|
||||
const footerCanvas = new drawBubbleCanvas("footer-particles");
|
||||
const mainCanvas = new drawBubbleCanvas("main-particles");
|
||||
|
||||
headCanvas.start();
|
||||
footerCanvas.start(30);
|
||||
mainCanvas.start(200);
|
||||
});
|
||||
48
docs/style/fonts.css
Normal file
48
docs/style/fonts.css
Normal file
@ -0,0 +1,48 @@
|
||||
/* hebrew */
|
||||
@font-face {
|
||||
font-family: 'Heebo';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2');
|
||||
unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Heebo';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* hebrew */
|
||||
@font-face {
|
||||
font-family: 'Heebo';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2');
|
||||
unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Heebo';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Oxygen';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzZmW5Kb8VZBHR.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Oxygen';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url(https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzaGW5Kb8VZA.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
1561
docs/style/style.css
Normal file
1561
docs/style/style.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user