diff options
| -rw-r--r-- | template.txt | 193 |
1 files changed, 186 insertions, 7 deletions
diff --git a/template.txt b/template.txt index b96b5e8..3544f33 100644 --- a/template.txt +++ b/template.txt @@ -364,7 +364,7 @@ to { @media (max-width: 600px) { /* Adjust the max-width as needed */ .hide-on-small { - display: none; /* Hide on small viewports */ + display: none !important; /* Hide on small viewports */ } } @@ -373,7 +373,101 @@ to { font-size: 20px; font-weight: bold; } + +.ufo { + position: fixed; + width: 100px; + height: 100px; + background-image: url('https://danieljones.au/media/ufo.gif'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + pointer-events: none; + z-index: -50; + opacity: 0; + top: 50%; + left: 50%; + transform-origin: center; +} + +@keyframes fly-across { + 0% { + opacity: 0; + transform: translate(var(--start-x), var(--start-y)) rotate(var(--angle)); + } + 10% { + opacity: 0.5; + } + 90% { + opacity: 0.5; + } + 100% { + opacity: 0; + transform: translate(var(--end-x), var(--end-y)) rotate(var(--angle)); + } +} </style> + +<script> +class UFO { + constructor() { + this.element = document.createElement('div'); + this.element.className = 'ufo'; + document.body.appendChild(this.element); + this.animate(); + } + + getRandomPosition() { + const screenWidth = window.innerWidth; + const screenHeight = window.innerHeight; + const diagonal = Math.sqrt(screenWidth * screenWidth + screenHeight * screenHeight); + + // Random angle for direction of travel + const angle = Math.random() * 360; + const rad = angle * Math.PI / 180; + + // Distance from center to ensure off-screen start/end + const distance = diagonal; + + // Calculate start and end positions + const startX = Math.cos(rad) * distance; + const startY = Math.sin(rad) * distance; + const endX = Math.cos(rad + Math.PI) * distance; + const endY = Math.sin(rad + Math.PI) * distance; + + return { + startX, + startY, + endX, + endY, + angle: angle // UFO points in direction of travel + }; + } + + animate() { + const pos = this.getRandomPosition(); + + this.element.style.setProperty('--start-x', `${pos.startX}px`); + this.element.style.setProperty('--start-y', `${pos.startY}px`); + this.element.style.setProperty('--end-x', `${pos.endX}px`); + this.element.style.setProperty('--end-y', `${pos.endY}px`); + this.element.style.setProperty('--angle', `${pos.angle}deg`); + + this.element.style.animation = 'none'; + void this.element.offsetWidth; // Force reflow + this.element.style.animation = 'fly-across 6s linear'; + + // Schedule next animation + this.element.addEventListener('animationend', () => { + setTimeout(() => this.animate(), Math.random() * 5000); + }, { once: true }); + } +} + +document.addEventListener('DOMContentLoaded', () => { + new UFO(); +}); +</script> </head> <body> <script> @@ -530,15 +624,101 @@ document.addEventListener('DOMContentLoaded', () => { <br><br> </div> <!-- <br><br> <div class="middle"> <img src="https://danieljon.es/linuxfreak.png"> <br> <a id="gentag" href="https://gitlab.com/ubunchu-translators/ubunchu">source</a> </div> --> - <br><br><div class="middle"> <a href="https://danieljon.es/posts/posts.rss"><img src="https://danieljon.es/media/rss.gif" alt="RSS feed"></a></div> - <div class="middle"> <a href="https://www.fsf.org/"><img src="https://danieljon.es/media/fsf_member.png" alt="FSF member"></a> + + <div class="middle"> + <img src="https://danieljones.au/media/tuxlove.gif"><br> + <a href="https://www.fsf.org/"><img src="https://danieljon.es/media/fsf_member.png" alt="FSF member"></a> <br><img src="https://danieljones.au/media/miku_fan.gif"> + <br><img src="https://danieljones.au/media/hentai_free.png" style="max-width: 100px;"> + <br><div class="middle"> <a href="https://danieljon.es/posts/posts.rss"><img src="https://danieljon.es/media/rss.gif" alt="RSS feed"></a></div> </div> <br> <div id="gentag">page generated {TIME} using <a href="https://git.danieljon.es/websitegenerator/">websitegenerator in C</a></div> <div style="position: fixed; right: 0; bottom: 0; width: 10vw; overflow: hidden;"> - <img src="https://danieljones.au/media/autism_awareness.gif" style="width: 100%;"> + +<div class="hide-on-small" style="display: flex; gap: 32px;"> + + <!-- Group 1: vertical column --> + <div style="display: flex; flex-direction: column; gap: 8px; max-width: 100px;"> + <img src="https://danieljones.au/media/buttons/firefox.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/aniquake.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/knbutton.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/signtheguestbook.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/trustme.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/twopaws.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/vlc.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/WEBP.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/2funny2load.jpg" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/antiinternet.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/catscape.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/emulate.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/linuxluv.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/goingonlinetoactsilly.jpg" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/graphicdesign.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/ilovetodostuffonthecomputer.jpg" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/hatemac.jpg" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/IMG_0255.GIF" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/imwaycooleronline.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/internetprivacynow.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/isupportgrass.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/keyboard.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/lainstamp.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/linuxnow.jpg" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/sharingcaring.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/web3.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/webddesignpassion.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/wiggly.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/Zblockadblockspyware.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/trustme.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/firefox.gif" style="max-height: 56px;"> + </div> + + <!-- Group 2: vertical column --> + <div style="display: flex; flex-direction: column; gap: 8px; max-width: 100px;"> + <img src="https://danieljones.au/media/buttons/bestviewed.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/cssdifficult.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/miku2.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/nftbutton.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/NoDiscord.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/poweredbylinux.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/socks.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/steam.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/voltbun1.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/y2k2.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/anythingbutchrome.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/bestwithcat.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/centerstamps.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/dontfeedai.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/dvd.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/imonlycoolontheinterwebds.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/madewithcss.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/netscape.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/neverlisten.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/openeyes.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/piracy.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/propaganda.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/rember.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/stampsucks.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/timewastestamp.png" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/toebeansNOW.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/toomanystamps.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/www.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/Zditchsocialmedianow.gif" style="max-height: 56px;"> + <img src="https://danieljones.au/media/buttons/Zkde.jpg" style="max-height: 56px;"> + </div> + +</div> + + +</div> + +<br> + +<!-- + <img src="https://danieljones.au/media/dance_miku.gif" style="max-width: 100px;"> + <img src="https://danieljones.au/media/autism_awareness.gif" style="max-height: 100px;"> <img src="https://danieljones.au/media/tux_rotate.gif" style="width: 100%;"> <img src="https://danieljones.au/media/autism.gif" style="width: 100%;"> +--> </div> <div class="leftimages hide-on-small"> <div class="gif-container"></div> @@ -556,7 +736,8 @@ document.addEventListener('DOMContentLoaded', () => { 'https://danieljones.au/media/cat_happy.gif', 'https://danieljones.au/media/cat_tail.gif', 'https://danieljones.au/media/miku.gif', - 'https://danieljones.au/media/i_love_you.gif' + 'https://danieljones.au/media/i_love_you.gif', + 'https://danieljones.au/media/buttons/computer-01.gif' ]; const container = document.querySelector('.gif-container'); @@ -595,5 +776,3 @@ document.addEventListener('DOMContentLoaded', () => { }); </script> <div class="running-sprite2"></div> -</body> -</html> |