This is a single file web page which contains common links. The file can be stored on a desktop and moved around, attached to emails, etc. Runs on any computer with a browser.
Open the file in a text editor and update the 'sites' array. The links are organized by sections. Updating the links are pretty much self-explainitory.
enjoy!
PotOfCoffee2Go
| <!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> |