Sounds very cool. I plan to do the same for my subbed channels, then download my history as audio. If you don't mind, could you link your HTML file?
The file is bare bones (in regards to adapting itself to "unusual" resolutions) but I guess it works well for my monitor. For now it's simply an HTML file with organized containers for linking channels, so that you can easily open the file and click on them without logging anywhere.
This is the code example:
HTML:
<!DOCTYPE html>
<html>
<!--
<div class="section">
<h1>Type of broadcaster</h1>
<div class="gridbox">
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
</div>
</div>
-->
<head>
<title>YouTube channels (example)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<base target="_blank">
<style>
html{
font:17px Verdana;
}
body{
color:#eee;
background:#223;
margin:1rem;
word-wrap:break-word;
overflow-y:scroll;
}
a{
color:#9b82fb;
text-decoration:none;
align-self:center
}
a:link{
color:#9b82fb;
}
a:visited{
color:#9b82fb;
}
a:hover{
color:#c0afff;
text-decoration:underline;
}
a:active{
color:#d2c8f7;
}
::selection{
color:#fff;
background:#8352b7;
}
h1{
color:#a595f7;
text-decoration:underline;
margin:0.2rem 0rem 0.5rem 0rem;
}
img{
color:#fff;
background:linear-gradient(20deg,#eba93055,#f1070755);
font:1rem Verdana;
border-radius:50%;
width:5rem;
height:5rem;
border:2px solid #fff;
display:block;
margin-left:auto;
margin-right:auto;
}
.section{
background:#423f6f5e;
padding:0.5rem;
background:#56457d;
text-align:center;
border-radius:1rem;
margin:0rem 0rem 0.5rem 0rem;
}
.gridbox{
display:grid;
grid-template-columns:auto auto auto auto;
background:#352a4f;
padding:1rem;
border-radius:1rem;
border:1px solid #9077cd;
}
.griditem{
display:grid;
grid-template-columns:auto auto;
background:#231c35;
border: 1px solid #8368c5;
padding:0.5rem;
}
.griditem:hover{
border:1px solid #c5a2f3;
box-shadow:0px 0px 8px 6px #8c42c3;
transition:0.2s;
z-index:99;
}
.help{
cursor:help;
}
.nonselectable{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
</style>
</head>
<body>
<div class="section">
<h1>Political channels (example)</h1>
<div class="gridbox">
<div class="griditem">
<img src="./profile.jpg">
<a href="https://www.youtube.com/channel/UCKYlm8qznxY5b3LOUS2w6ng/videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./profile.jpg">
<a href="https://www.youtube.com/channel/UCKYlm8qznxY5b3LOUS2w6ng/videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./profile.jpg">
<a href="https://www.youtube.com/channel/UCKYlm8qznxY5b3LOUS2w6ng/videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./profile.jpg">
<a href="https://www.youtube.com/channel/UCKYlm8qznxY5b3LOUS2w6ng/videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./profile.jpg">
<a href="https://www.youtube.com/channel/UCKYlm8qznxY5b3LOUS2w6ng/videos">Name of channel</a>
</div>
</div>
</div>
<div class="section">
<h1>Type of broadcaster</h1>
<div class="gridbox">
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
<div class="griditem">
<img src="./pathOfImage.extension">
<a href="https://www.youtube.com/channel//videos">Name of channel</a>
</div>
</div>
</div>
</body>
</html>
Because it's one file the CSS is internal (so it's already in it), but for the images (unless you want to encode them and paste them into the file), you'll have to type the image's relative path in the img src (which I assume will be their square profile's image).
Besides from that, it's a grid of 4 columns (that you can alter with the "grid-template-columns" property to your liking), so for now, this means that for each ".gridbox", one line will be occupied by 4 ".griditem" (you can see them how they're wrapped around in the file).
The HTML comment at the beginning is like a template that you can copy-paste if you need to make another section for other type of broadcasters (like if you want a box containing political streamers, put in there).
Finally, the YouTube URL template I put in there is the one with the channel-ID, this is because it's the most reliable channel identifier; if for some reson they change their name or handle, by having the channel-ID that won't matter, and will always (unless extreme circumstance) link to their channel.
To get it from any YT profile, just go to their profile description and click "Copy channel ID".
Then put it in the URL between /channel/ and /videos/ like so (example):
https://www.youtube.com/channel/UCKYlm8qznxY5b3LOUS2w6ng/videos
