diff options
| -rw-r--r-- | confirm.svg | 2 | ||||
| -rw-r--r-- | copy.svg | 2 | ||||
| -rw-r--r-- | index.html | 115 | ||||
| -rw-r--r-- | style.css | 10 |
4 files changed, 105 insertions, 24 deletions
diff --git a/confirm.svg b/confirm.svg new file mode 100644 index 0000000..f04a8b1 --- /dev/null +++ b/confirm.svg @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 13.753906 4.65625 c 0.175782 -0.199219 0.261719 -0.460938 0.246094 -0.722656 c -0.019531 -0.265625 -0.140625 -0.511719 -0.339844 -0.6875 c -0.199218 -0.175782 -0.460937 -0.265625 -0.726562 -0.246094 c -0.265625 0.015625 -0.511719 0.140625 -0.6875 0.339844 l -6.296875 7.195312 l -2.242188 -2.246094 c -0.390625 -0.390624 -1.023437 -0.390624 -1.414062 0 c -0.1875 0.1875 -0.292969 0.445313 -0.292969 0.710938 s 0.105469 0.519531 0.292969 0.707031 l 3 3 c 0.195312 0.195313 0.464843 0.300781 0.742187 0.292969 c 0.273438 -0.011719 0.535156 -0.132812 0.71875 -0.34375 z m 0 0" fill="#222222"/></svg> diff --git a/copy.svg b/copy.svg new file mode 100644 index 0000000..17b956c --- /dev/null +++ b/copy.svg @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><g fill="#222222"><path d="m 4 11.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -2.199219 1.800781 -4 4 -4 h 3 c 2.199219 0 4 1.800781 4 4 c 0 1.640624 -0.996094 3.070312 -2.421875 3.679687 l -0.785156 -1.839844 c 0.710937 -0.304687 1.207031 -1 1.207031 -1.839843 c 0 -1.125 -0.875 -2 -2 -2 h -3 c -1.125 0 -2 0.875 -2 2 s 0.875 2 2 2 z m 0 0"/><path d="m 9 13.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -1.621094 0.964844 -3.03125 2.367188 -3.65625 l 0.816406 1.828124 c -0.699219 0.3125 -1.183594 1 -1.183594 1.828126 c 0 1.125 0.875 2 2 2 h 3 c 1.125 0 2 -0.875 2 -2 s -0.875 -2 -2 -2 v -2 c 2.199219 0 4 1.800781 4 4 c 0 2.199218 -1.800781 4 -4 4 z m 0 0"/></g></svg> @@ -95,6 +95,11 @@ <div class="title-bar"> <span>ABOUT.rtf — /home/lain</span> <div class="controls"> + <label> + <button id="copyUrl" data-radio="home" title="Copy url to this window"> + <img src="./copy.svg" width="18" height="18" style="padding-left: 1px;" alt="copy"> + </button> + </label> <label for="close"> <img src="./close.svg" width="18" height="18" alt="close"> </label> @@ -143,8 +148,11 @@ <div class="title-bar"> <span>PROJECTS.rtf — /home/lain</span> <div class="controls"> + <button id="copyUrl" data-radio="projects" title="Copy url to this window"> + <img src="./copy.svg" width="18" height="18" alt="copy"> + </button> <label for="close"> - <img src="./close.svg" width="18" height="18" alt="close"> + <img src="./close.svg" width="18" height="18" alt="close"> </label> </div> </div> @@ -239,9 +247,6 @@ <a href="https://mchal.lol" target="_blank" rel="noopener noreferer" title="michal"> <img src="michal.gif" alt="michal"> </a> - <a href="https://astral.im" target="_blank" rel="noopener noreferer" title="astral"> - <img src="https://astral.im/astral.gif" alt="astral"> - </a> <a href="https://arimelody.me" target="_blank" rel="noopener noreferer" title="ari melody"> <img src="https://arimelody.me/img/buttons/ari%20melody.gif" alt="ari melody web button"> </a> @@ -301,30 +306,92 @@ }); </script> - <script> - let colonVisible = true; + <script> + let colonVisible = true; + + function updateClockAndCalendar() { + const now = new Date(); + const hours = now.getHours(); + const minutes = now.getMinutes(); + + const displayHours = hours < 10 ? `0${hours}` : hours; + const displayMinutes = minutes < 10 ? `0${minutes}` : minutes; - function updateClockAndCalendar() { - const now = new Date(); - const hours = now.getHours(); - const minutes = now.getMinutes(); + const colon = colonVisible ? ':' : ' '; + document.getElementById('time').textContent = `${displayHours}${colon}${displayMinutes}`; + colonVisible = !colonVisible; - const displayHours = hours < 10 ? `0${hours}` : hours; - const displayMinutes = minutes < 10 ? `0${minutes}` : minutes; + const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; + const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; + document.getElementById('day').textContent = days[now.getDay()]; + document.getElementById('date').textContent = now.getDate(); + document.getElementById('month').textContent = months[now.getMonth()]; + } + + updateClockAndCalendar(); + setInterval(updateClockAndCalendar, 1000); + </script> + + <script> + window.addEventListener('DOMContentLoaded', () => { + const params = new URLSearchParams(window.location.search); + const appId = params.get('app'); + const contentId = params.get('content'); + if (appId) { + const radio = document.getElementById(appId); + if (radio) { + radio.checked = true; - const colon = colonVisible ? ':' : ' '; - document.getElementById('time').textContent = `${displayHours}${colon}${displayMinutes}`; - colonVisible = !colonVisible; + if (contentId) { + const contentRadio = document.getElementById(appId+"-"+contentId); + if (contentRadio) { + contentRadio.checked = true; + } + } + } + } + }); + </script> + + <script> + document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('#copyUrl').forEach(button => { + console.log("found button"); + button.addEventListener('click', () => { + const radioId = button.dataset.radio; + const radio = document.getElementById(radioId); + console.log(`Button clicked for: ${radioId}`); + console.log(`Radio element:`, radio); + + if (radio && radio.checked) { + let url = `${location.origin}${location.pathname}?app=${radioId}`; + const contentRadios = document.querySelectorAll('input[name="'+radioId+'_menu"]'); + for (const contentRadio of contentRadios) { + if (contentRadio.checked) { + const contentRadioId = contentRadio.id.replace(radioId+"-", ""); + url = url+`&content=${contentRadioId}` + } + } + navigator.clipboard.writeText(url) + .then(() => { + const originalText = button.innerHTML; + button.innerHTML = '<img src="./confirm.svg" width="18" height="18" style="padding-left: 1px;" alt="copy">'; + button.disabled = true; + + setTimeout(() => { + button.innerHTML = originalText; + button.disabled = false; + }, 500); + }) + .catch(err => console.log('Failed to copy URL: ' + err)); + } else { + alert('This window is not currently active.'); + } + }); + }); + }); + </script> - const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; - const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; - document.getElementById('day').textContent = days[now.getDay()]; - document.getElementById('date').textContent = now.getDate(); - document.getElementById('month').textContent = months[now.getMonth()]; - } - updateClockAndCalendar(); - setInterval(updateClockAndCalendar, 1000); - </script> </body> </html> @@ -267,6 +267,16 @@ body { align-items: center; } +.window .title-bar .controls label button { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} + .window .title-bar .controls span:hover { background-color: #999; } |
