diff --git a/animations.js b/animations.js new file mode 100644 index 0000000..c4bdd03 --- /dev/null +++ b/animations.js @@ -0,0 +1,31 @@ +(function () { + const backToTopButton = document.getElementById("back-to-top"); + + if (backToTopButton) { + function toggleBackToTop() { + if (window.pageYOffset > 300) { + backToTopButton.classList.add("visible"); + } else { + backToTopButton.classList.remove("visible"); + } + } + + backToTopButton.addEventListener("click", function () { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }); + + window.addEventListener("scroll", toggleBackToTop); + + toggleBackToTop(); + } + + const listItems = document.querySelectorAll("li"); + listItems.forEach((item, index) => { + if (!item.style.animationDelay) { + item.style.animationDelay = `${0.1 + index * 0.05}s`; + } + }); +})(); diff --git a/contact.html b/contact.html index 80f38cf..ebf30ab 100644 --- a/contact.html +++ b/contact.html @@ -1,58 +1,82 @@ - - - - Krzak.org - - - -
-

- - krzak.org - - Krzak.org -

-

Contact:

- -

Support:

- -
- -
- - - \ No newline at end of file + + + + Krzak.org - Contact + + + +
+

+ + krzak.org + + Krzak.org +

+

Contact:

+ +

Support:

+ +
+ +
+ + + + + + + + diff --git a/index.html b/index.html index 427cead..6d33567 100755 --- a/index.html +++ b/index.html @@ -4,74 +4,140 @@ Krzak.org - + - - - - - - - - - + + + + + + + + + - - + + - - - - + + + + -
-

+
+

krzak.org Krzak.org

-

Hi, welcome to krzak.org

+

Hi, welcome to krzak.org

-

If you want an account on any of these, want to suggest something new or get a subdomain, just message me

+

+ If you want an account on any of these, want to suggest something new or + get a subdomain, just message me +

+ + + + + diff --git a/refresh.js b/refresh.js index 51f6d92..7dd43de 100644 --- a/refresh.js +++ b/refresh.js @@ -1,63 +1,57 @@ -(function() { - // Configuration - const SSE_PORT = 8765; - const RECONNECT_DELAY = 5000; // 5 seconds - - let eventSource = null; - let reconnectTimer = null; - - function connect() { - // Clear any existing reconnect timer - if (reconnectTimer) { - clearTimeout(reconnectTimer); - reconnectTimer = null; - } - - // Close existing connection - if (eventSource) { - eventSource.close(); - } - - // Connect to SSE server - const url = `${window.location.protocol}//${window.location.hostname}:${SSE_PORT}/events`; - eventSource = new EventSource(url); - - eventSource.onmessage = function(event) { - try { - const data = JSON.parse(event.data); - if (data.type === 'reload') { - console.log('Repository updated, reloading page...'); - // Hard reload to bypass cache - window.location.reload(true); - } - } catch (e) { - console.error('Error parsing SSE message:', e); - } - }; - - eventSource.onerror = function(error) { - console.log('SSE connection error, will reconnect...'); - eventSource.close(); - // Attempt to reconnect after delay - reconnectTimer = setTimeout(connect, RECONNECT_DELAY); - }; - - eventSource.onopen = function() { - console.log('Connected to auto-refresh service'); - }; +(function () { + const SSE_PORT = 8765; + const RECONNECT_DELAY = 5000; // miliseconds + + let eventSource = null; + let reconnectTimer = null; + + function connect() { + if (reconnectTimer) { + clearTimeout(reconnectTimer); + reconnectTimer = null; } - - // Start connection when page loads - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', connect); - } else { - connect(); + + if (eventSource) { + eventSource.close(); } - - // Cleanup on page unload - window.addEventListener('beforeunload', function() { - if (eventSource) { - eventSource.close(); + + const url = `${window.location.protocol}//${window.location.hostname}:${SSE_PORT}/events`; + eventSource = new EventSource(url); + + eventSource.onmessage = function (event) { + try { + const data = JSON.parse(event.data); + if (data.type === "reload") { + console.log("Repository updated, reloading page..."); + // Hard reload to bypass cache + window.location.reload(true); } - }); -})(); \ No newline at end of file + } catch (e) { + console.error("Error parsing SSE message:", e); + } + }; + + eventSource.onerror = function (error) { + console.log("SSE connection error, will reconnect..."); + eventSource.close(); + // Attempt to reconnect + reconnectTimer = setTimeout(connect, RECONNECT_DELAY); + }; + + eventSource.onopen = function () { + console.log("Connected to auto-refresh service"); + }; + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", connect); + } else { + connect(); + } + + window.addEventListener("beforeunload", function () { + if (eventSource) { + eventSource.close(); + } + }); +})(); diff --git a/styles.css b/styles.css index b3acb1c..4c0ee85 100644 --- a/styles.css +++ b/styles.css @@ -16,6 +16,10 @@ box-sizing: border-box; } +html { + scroll-behavior: smooth; +} + body { background: linear-gradient( var(--bg-gradient-1), @@ -130,6 +134,24 @@ li a { gap: 12px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; + position: relative; + overflow: hidden; +} + +li a::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(244, 162, 97, 0.1), + transparent + ); + transition: left 0.5s ease; } li a:active { @@ -160,12 +182,100 @@ br { content: ""; } +/* Back to top button */ +.back-to-top { + position: fixed; + bottom: 24px; + right: 24px; + width: 48px; + height: 48px; + border-radius: 50%; + background: var(--link-bg); + border: 1px solid var(--container-border); + color: var(--link-color); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 1000; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3); +} + +.back-to-top.visible { + opacity: 1; + visibility: visible; +} + +.back-to-top:hover { + background: var(--link-hover-bg); + border-color: var(--link-hover-border); + transform: translateY(-2px); +} + +.back-to-top:active { + transform: translateY(0); +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in { + animation: fadeIn 0.6s ease-out forwards; +} + +.slide-down { + animation: slideDown 0.6s ease-out forwards; +} + +.slide-up { + animation: slideUp 0.6s ease-out forwards; + opacity: 0; +} + @media (hover: hover) { li a:hover { background-color: var(--link-hover-bg); border-color: var(--link-hover-border); transform: scale(1.02); } + + li a:hover::before { + left: 100%; + } } @media (min-width: 768px) { @@ -209,11 +319,29 @@ br { li a span { font-size: 0.85rem; } + + .back-to-top { + bottom: 16px; + right: 16px; + width: 44px; + height: 44px; + } } @media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + * { animation: none !important; transition: none !important; } + + .fade-in, + .slide-down, + .slide-up { + opacity: 1 !important; + transform: none !important; + } } \ No newline at end of file