|
<!DOCTYPE html> |
|
<html> |
|
|
|
<!-- |
|
Simple common links web page |
|
Works on any OS platform that has a browser |
|
|
|
Change the Config to your liking |
|
Organize links into sections and add links below each section |
|
Colors are in <style> root: |
|
|
|
Save to your desktop |
|
|
|
source: https://gist.github.com/PotOfCoffee2Go/fe60cfa7382dc88e6ad901178b343649 |
|
author: PotOfCoffee2Go |
|
license: MIT |
|
--> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="author" content="PotOfCoffee2Go"> |
|
|
|
<script> |
|
// Config |
|
const title = '<h2>My Links</h2>'; |
|
const menuTitle = '-- Top of page --'; |
|
const openTabCbxlabel = 'Links open a new tab'; |
|
const openTabCbxChecked = true; |
|
|
|
// Sections and links to web sites |
|
const sites = [ |
|
{ section: 'Common' }, |
|
{ name: 'amazon', url: 'https://www.amazon.com' }, |
|
{ name: 'walmart', url: 'https://www.walmart.com' }, |
|
{ name: 'accuweather', url: 'https://www.accuweather.com/' }, |
|
{ name: 'Calendar', url: 'https://www.timeanddate.com/calendar/' }, |
|
{ name: 'GMail', url: 'https://mail.google.com/mail/u/0/#inbox' }, |
|
|
|
{ section: 'Development' }, |
|
{ name: 'GitHub', url: 'https://github.com' }, |
|
{ name: 'pixabay', url: 'https://www.pixabay.com' }, |
|
{ name: 'labwc', url: 'https://labwc.github.io/getting-started.html' }, |
|
{ name: 'Example', url: 'https://www.example.com' }, |
|
{ name: 'TW Talk', url: 'https://talk.tiddlywiki.org/' }, |
|
{ name: 'Regexr', url: 'https://regexr.com/' }, |
|
{ name: 'dillinger', url: 'https://dillinger.io/' }, |
|
{ name: 'Worksheet', url: 'https://ethercalc.net' }, |
|
{ name: 'OneLook', url: 'https://www.onelook.com/thesaurus/' }, |
|
|
|
{ section: 'Colors' }, |
|
{ name: 'Terminal color chart', url: 'https://user-images.githubusercontent.com/995050/47952855-ecb12480-df75-11e8-89d4-ac26c50e80b9.png' }, |
|
{ name: 'HTML color chart', url: 'https://htmlcolorcodes.com/' }, |
|
|
|
{ section: 'Financial' }, |
|
{ name: 'Capital One', url: 'https://www.capitalone.com/' }, |
|
{ name: 'PayPal', url: 'https://www.paypal.com/signin' }, |
|
{ name: 'login.gov', url: 'https://secure.login.gov/' }, |
|
{ name: 'pay.gov', url: 'https://www.pay.gov' }, |
|
|
|
{ section: 'Entertainment' }, |
|
{ name: 'YouTube', url: 'https://www.youtube.com/' }, |
|
{ name: 'IMDB', url: 'https://www.imdb.com/' }, |
|
{ name: 'AccuRadio', url: 'https://www.accuradio.com/' }, |
|
]; |
|
</script> |
|
|
|
<style> |
|
/* colors - this is a blueish theme */ |
|
:root { |
|
--body-font-size: 22px; |
|
--menu-font-size: 18px; |
|
--checkbox-font-size: 18px; |
|
--section-font-size: 24px; |
|
--link-table-font-size: 22px; |
|
|
|
--body-color: #87ceeb; |
|
--body-bg-color: #08053f; |
|
--menu-color: #87ceeb; |
|
--menu-bg-color: #21203b; |
|
--section-color: #87ceeb; |
|
--section-bg-color: #10103c; |
|
--section-border-color: #665dff; |
|
--link-color: #bee9fa; |
|
--url-color: #87ceeb; |
|
--url-bg-color: inherit; |
|
--even-bg-color: #001b5f; |
|
} |
|
|
|
/* colors - this is a greenish theme */ |
|
/* |
|
:root { |
|
--body-font-size: 18px; |
|
--menu-font-size: 18px; |
|
--checkbox-font-size: 18px; |
|
--section-font-size: 18px; |
|
--link-table-font-size: 18px; |
|
|
|
--body-color: #3cb371; |
|
--body-bg-color: #1c352d; |
|
--menu-color: #3cb371; |
|
--menu-bg-color: #1c352d; |
|
--section-color: #8db600; |
|
--section-bg-color: #1c352d; |
|
--section-border-color: #1c352d; |
|
--link-color: #87ceeb; |
|
--even-bg-color: #202020; |
|
} |
|
*/ |
|
|
|
html, body { |
|
color: var(--body-color); |
|
background: var(--body-bg-color); |
|
font-size: var(--body-font-size); |
|
} |
|
.header { |
|
position: sticky; |
|
top: 0; |
|
color: var(--body-color); |
|
background: var(--body-bg-color);; |
|
padding: 1em 1em; |
|
} |
|
.anchor { |
|
display: block; |
|
height: 3em; /*same height as header*/ |
|
margin-top: -3em; /*same height as header*/ |
|
visibility: hidden; |
|
} |
|
|
|
#open-tab-label { |
|
font-size: var(--checkbox-font-size); |
|
} |
|
#open-tab-cbx { |
|
margin-left: 3em; |
|
} |
|
#permalink, #reset-permalink, #help-btn { |
|
font-size: var(--checkbox-font-size); |
|
border: 1px solid; |
|
border-radius: 6px; |
|
margin-left: .5em; |
|
padding: 0 .5em; |
|
cursor: pointer; |
|
} |
|
#help-text { |
|
margin-left: 3em; |
|
} |
|
#help-text p{ |
|
line-height: .3em; |
|
} |
|
|
|
select { |
|
background: var(--menu-bg-color); |
|
color: var(--menu-color); |
|
font-size: var(--menu-font-size); |
|
} |
|
select option { |
|
background: var(--menu-bg-color); |
|
} |
|
table { |
|
font-size: var(--link-table-font-size); |
|
border-collapse: separate; |
|
border-spacing: 0 .3em; |
|
width: 50%; |
|
margin-left: 3em; |
|
} |
|
tr:nth-child(even) { |
|
background-color: var(--even-bg-color); |
|
} |
|
td, th { |
|
text-align: left; |
|
padding: 8px; |
|
} |
|
td.section { |
|
font-size: var(--section-font-size); |
|
color: var(--section-color); |
|
background: var(--section-bg-color); |
|
border: 1px solid var(--section-border-color); |
|
text-align: center; |
|
border-radius: 30px; |
|
} |
|
td.url { |
|
color: var(--url-color); |
|
background: var(--url-bg-color); |
|
} |
|
td a:link, td a:visited, td a:hover, td a:active { |
|
text-decoration: none; |
|
color: var(--link-color); |
|
} |
|
</style> |
|
|
|
<script> |
|
window.onload = () => { |
|
// Parameters passed in URL querystring |
|
const queryParams = new URLSearchParams(location.search); |
|
|
|
// Page title |
|
document.title = title.replace(/(<([^>]+)>)/ig, ''); // Remove tags |
|
document.getElementById('title').innerHTML = title; |
|
|
|
// -------------------- |
|
// Permalink, reset, and help buttons |
|
// Show querystring in browser address bar |
|
document.getElementById('permalink') |
|
.addEventListener('click', () => { location.search = queryParams.toString(); }) |
|
document.getElementById('reset-permalink') |
|
.addEventListener('click', () => { location.search = ''; }); |
|
|
|
// Show/hide help |
|
const helpText = document.getElementById('help-text'); |
|
document.getElementById('help-btn').addEventListener('click', () => { |
|
if (helpText.style.display === 'none') { |
|
helpText.style.display = 'block'; |
|
sectionSelect.value = ''; |
|
scrollToSection(); |
|
} else { |
|
helpText.style.display = 'none'; |
|
} |
|
}) |
|
|
|
// -------------------- |
|
// Open links in a 'new tab' checkbox |
|
document.getElementById('open-tab-label').innerHTML = openTabCbxlabel; |
|
const openTabCbx = document.getElementById('open-tab-cbx'); |
|
openTabCbx.checked = queryParams.get('opentab') |
|
? (queryParams.get('opentab') === 'yes' ? true : false) |
|
: openTabCbxChecked; |
|
queryParams.set('opentab', openTabCbx.checked ? 'yes' : 'no'); |
|
|
|
openTabCbx.addEventListener('change', () => { |
|
queryParams.set('opentab', openTabCbx.checked ? 'yes' : 'no'); |
|
buildTable(); |
|
}) |
|
|
|
// -------------------- |
|
// Section menu dropdown |
|
const sectionSelect = document.getElementById('section-select'); |
|
const sectionAnchor = (site) => site.section.replace(/\s/g,'-').toLowerCase(); |
|
const option = (site) => `<option value="${sectionAnchor(site)}">${site.section}</option>`; |
|
const addMenu = (site) => sectionSelect.innerHTML += option(site); |
|
|
|
// Scroll to section selected in dropdown |
|
function scrollToSection() { |
|
if (!sectionSelect.value) { |
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
} else { |
|
document.getElementById(sectionSelect.value).scrollIntoView({behavior: 'smooth' }); |
|
} |
|
} |
|
|
|
// Set the querystring 'section' and scroll to section |
|
sectionSelect.addEventListener('change', () => { |
|
queryParams.set('section', sectionSelect.value); |
|
scrollToSection(); |
|
}) |
|
|
|
// Populate the section menu dropdown and set value to querystring 'section' |
|
function buildSectionDropdown() { |
|
sectionSelect.innerHTML = `<option value="">${menuTitle}</option>`; |
|
sites.forEach(site => { if (site.section) { addMenu(site); } }) |
|
sectionSelect.value = queryParams.get('section') ? queryParams.get('section') : ''; |
|
} |
|
|
|
// -------------------- |
|
// Build links table |
|
// Construct a section row or a link row and add to table |
|
const section = (site) => `<span class="anchor" id="${sectionAnchor(site)}"></span>` + |
|
`<tr><td class="section" colspan="2">${site.section}</td></tr>`; |
|
const link = (site) => `<tr>` + |
|
`<td><a href="${site.url}" ${openTabCbx.checked ? 'target="_blank"' : ''}>${site.name}</a></td>` + |
|
`<td class="url">${site.url}</td>` + |
|
`</tr>`; |
|
const addRow = (html) => document.getElementById('link-table-rows').innerHTML += html; |
|
|
|
// Populate links table and scroll to selected section |
|
function buildTable() { |
|
document.getElementById('link-table-rows').innerHTML = ''; |
|
sites.forEach(site => { |
|
if (site.section) { addRow(section(site)); } |
|
if (site.name && site.url) { addRow(link(site)); } |
|
}) |
|
scrollToSection(); |
|
} |
|
|
|
// Build the section menu |
|
buildSectionDropdown(); |
|
// Build the table of sections and links |
|
buildTable(); |
|
} |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="title" /></div> |
|
|
|
<!-- Section dropdown & open link in new tab checkbox --> |
|
<div class="header"> |
|
<select id="section-select" name="section-select"></select> |
|
<input id="open-tab-cbx" type="checkbox" name="open-tab-cbx"/> |
|
<label id="open-tab-label" for="open-tab-cbx"></label> |
|
<span id="permalink">Permalink</span> <span id="reset-permalink">Reset</span> <span id="help-btn">Help</span> |
|
</div> |
|
|
|
<div id="help-text" style="display: none;"> |
|
<p>Dropdown box scrolls to section</p> |
|
<p>Checkbox toggles whether to open links in a new tab</p> |
|
<p>Permalink in address bar to display page with current settings</p> |
|
<p>Reset permalink to default page</p> |
|
</div> |
|
|
|
<!-- Table of sections and links --> |
|
<table><tbody id="link-table-rows"></tbody></table> |
|
|
|
<!-- add some space to bottom of page so scrolling is sane --> |
|
<div style="height:70vh;"></div> |
|
</body> |
|
|
|
</html> |