diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 134 |
1 files changed, 70 insertions, 64 deletions
@@ -10,13 +10,14 @@ <div class="workspace"> - <input class="radio" type="radio" id="home" name="windows_box" value="" checked="true"></input> - <input class="radio" type="radio" id="projects" name="windows_box" value=""></input> + <input class="radio" type="radio" id="close" name="windows_box" value=""> + <input class="radio" type="radio" id="home" name="windows_box" value="" checked> + <input class="radio" type="radio" id="projects" name="windows_box" value=""> - <input class="radio" type="radio" id="home-info" name="home_menu" checked="true"> + <input class="radio" type="radio" id="home-info" name="home_menu" checked> <input class="radio" type="radio" id="home-contact" name="home_menu"> - <input class="radio" type="radio" id="projects-personal" name="projects_menu" checked="true"> + <input class="radio" type="radio" id="projects-personal" name="projects_menu" checked> <input class="radio" type="radio" id="projects-shards" name="projects_menu"> <input class="radio" type="radio" id="projects-crystal" name="projects_menu"> <input class="radio" type="radio" id="projects-vanillaos" name="projects_menu"> @@ -85,7 +86,7 @@ <div class="embedded"></div> </a> <a class="dockelement" title="Milk outside a bag of milk outside a bag of milk" href="https://nikita-kryukov.itch.io/milk-outside-a-bag-of-milk-outside-a-bag-of-milk"> - <img class="square" src="./milkoutsideabagofmilk.png" alt="milk chan looking up, surrounded by the text 'milk outside a bag of milk'"/> + <img class="square" src="./milkoutsideabagofmilk.png" alt="milk chan looking up, surrounded by the text 'milk outside a bag of milk'"> <div class="embedded"></div> </a> @@ -96,7 +97,9 @@ <div class="title-bar"> <span>ABOUT.rtf — /home/lain</span> <div class="controls"> - <span><a href="#"><img src="./close.svg" width="18" height="18"/></a></span> + <label for="close"> + <img src="./close.svg" width="18" height="18" alt="close"> + </label> </div> </div> <div class="content" id="home-content-info"> @@ -108,10 +111,10 @@ <p>I am currently studying Computer Science and work at Nokia as a software developer.</p> </div> <div style="justify-content: center; align-items: center; text-align: center;"> - <img src="./firefly.png" width="90%" max-width="400"> + <img src="./firefly.png" alt="a firefly resting on a finger"> </div> <div> - <hr style="justify-content: bottom; border-top:2px solid #A0A0A0; width: 100%"> + <hr style="justify-content: center; border-top:2px solid #A0A0A0; width: 100%"> <p>Click the buttons in the left menu to view extra information or the deskapps in the right to open different windows! The window can also be moved around.</p> </div> </div> @@ -142,7 +145,9 @@ <div class="title-bar"> <span>PROJECTS.rtf — /home/lain</span> <div class="controls"> - <span><a href="#"><img src="./close.svg" width="18" height="18"/></a></span> + <label for="close"> + <img src="./close.svg" width="18" height="18" alt="close"> + </label> </div> </div> <div class="content" id="projects-content-personal"> @@ -230,74 +235,75 @@ <img src="https://futile.eu/static/buttons/futile.png" alt="button that says 'futile'"> </a> <a> - <iframe src="https://increm.net/badge?key=xenia" title="incremnet badge" width="88" height="31" frameborder="0" style="background-color: #d4d0c8"></iframe> + <iframe src="https://increm.net/badge?key=xenia" title="incremnet badge" width="88" height="31" style="background-color: #d4d0c8; border: none;"></iframe> </a> <a href="https://nyaa.si/view/964646" target="_blank" rel="noopener noreferrer" title="watch lain now!!"> - <img src="lain.gif" alt="lain" width="88px" height="31px"> + <img src="lain.gif" alt="lain" width="88" height="31"> </a> - <a><img src="copland88x31.png" alt="copland os now!" width="88px" height="31px"></a> - <a><img src="transrights.png" alt="trans rights now!" width="88px" height="31px"></a> - <a><img src="xeniatransnow.png" alt="use linux now!" width="88px" height="31px"></a> + <a><img src="copland88x31.png" alt="copland os now!" width="88" height="31"></a> + <a><img src="transrights.png" alt="trans rights now!" width="88" height="31"></a> + <a><img src="xeniatransnow.png" alt="use linux now!" width="88" height="31"></a> </div> </div> - <script> - document.querySelectorAll('.window').forEach(windowEl => { - const titleBar = windowEl.querySelector('.title-bar'); - let offsetX = 0, offsetY = 0, isDragging = false; + </div> + <script> + document.querySelectorAll('.window').forEach(windowEl => { + const titleBar = windowEl.querySelector('.title-bar'); + let offsetX = 0, offsetY = 0, isDragging = false; - titleBar.addEventListener('mousedown', (e) => { - isDragging = true; - offsetX = e.clientX - windowEl.offsetLeft; - offsetY = e.clientY - windowEl.offsetTop; - windowEl.style.zIndex = 1000; - }); + titleBar.addEventListener('mousedown', (e) => { + isDragging = true; + offsetX = e.clientX - windowEl.offsetLeft; + offsetY = e.clientY - windowEl.offsetTop; + windowEl.style.zIndex = 1000; + }); - document.addEventListener('mousemove', (e) => { - if (isDragging) { - windowEl.style.left = `${e.clientX - offsetX}px`; - windowEl.style.top = `${e.clientY - offsetY}px`; - } - }); + document.addEventListener('mousemove', (e) => { + if (isDragging) { + windowEl.style.left = `${e.clientX - offsetX}px`; + windowEl.style.top = `${e.clientY - offsetY}px`; + } + }); - document.addEventListener('mouseup', () => { - isDragging = false; - }); - }); - </script> + document.addEventListener('mouseup', () => { + isDragging = false; + }); + }); + </script> - <script> - let link = document.querySelectorAll(".menu-button"); + <script> + let link = document.querySelectorAll(".menu-button"); - link.forEach(function(elem) { - elem.addEventListener("mousedown", () => { - elem.classList.add("ripple-effect"); - setTimeout(() => { - elem.classList.remove("ripple-effect"); - }, 1000); - }) - }); - </script> + link.forEach(function(elem) { + elem.addEventListener("mousedown", () => { + elem.classList.add("ripple-effect"); + setTimeout(() => { + elem.classList.remove("ripple-effect"); + }, 1000); + }) + }); + </script> - <script> - function updateClockAndCalendar() { - const now = new Date(); - const hours = now.getHours(); - const minutes = now.getMinutes(); + <script> + 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; - document.getElementById('time').textContent = `${displayHours}:${displayMinutes}`; - - 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()]; - } + const displayHours = hours < 10 ? `0${hours}` : hours; + const displayMinutes = minutes < 10 ? `0${minutes}` : minutes; + document.getElementById('time').textContent = `${displayHours}:${displayMinutes}`; + + 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> + updateClockAndCalendar(); + setInterval(updateClockAndCalendar, 1000); + </script> </body> </html> |