diff --git a/index.html b/index.html index 6e436ce..dab8164 100755 --- a/index.html +++ b/index.html @@ -97,27 +97,16 @@
  • - - + + Kreatyw + AI Powered™
  • diff --git a/mc.html b/mc.html index de85700..e24eacd 100644 --- a/mc.html +++ b/mc.html @@ -1,487 +1,570 @@ - + - - - Krzak.org - Minecraft - - - - - + @keyframes spin { + to { + transform: rotate(360deg); + } + } - -
    -

    - - krzak.org - - Krzak.org - Minecraft -

    + .error-message { + color: #f87171; + text-align: center; + padding: 20px; + background: rgba(248, 113, 113, 0.1); + border-radius: 12px; + border: 1px solid rgba(248, 113, 113, 0.3); + } -
    -
    - - Loading server status... -
    -
    + .players-list { + margin-top: 8px; + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.5; + } -
    -

    Instrukcja

    -
      -
    1. Zainstalujcie fabric 1.21.10
      2. -
    2. Zainstalujcie moda AutoModpack
      3. -
    3. Dołączcie na krzak.org i, kiedy o to zapyta, wklejcie tekst z pliku automodpack_fingerprint.txt
      4. -
    -

    Polecam też dodać nasz resourcepack

    -

    Do skinów polecam ely.by jak ktoś nie ma premium (nie musi)

    -
    + .fingerprint-widget { + background: var(--link-bg); + border-radius: 16px; + padding: 24px; + border: 1px solid var(--container-border); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3); + margin: 24px 0; + transition: all 0.3s ease; + } -
    -
    -
    AutoModpack Fingerprint
    -
    -
    - 3b180a41fe913487c1c86ad79c6dc085d01a272ac2da556f4bf7379ee3a535f8
    - + .fingerprint-widget:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4); + border-color: var(--link-hover-border); + } + + /* Copy button styles */ + .info-value-wrapper { + display: flex; + align-items: center; + gap: 12px; + justify-content: space-between; + } + + .copy-button { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--container-border); + border-radius: 8px; + padding: 8px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + flex-shrink: 0; + } + + .copy-button:hover { + background: rgba(255, 255, 255, 0.1); + border-color: var(--accent-color); + transform: scale(1.05); + } + + .copy-button.copied { + background: rgba(74, 222, 128, 0.2); + border-color: rgba(74, 222, 128, 0.5); + } + + .copy-icon { + width: 18px; + height: 18px; + color: var(--text-color); + flex-shrink: 0; + } + + /* Resourcepack widget styles */ + .resourcepack-widget { + background: var(--link-bg); + border-radius: 16px; + padding: 0; + border: 1px solid var(--container-border); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3); + margin: 24px 0; + transition: all 0.3s ease; + overflow: hidden; + } + + .resourcepack-widget:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4); + border-color: var(--link-hover-border); + } + + .resourcepack-link { + display: flex; + align-items: center; + gap: 16px; + padding: 20px 24px; + text-decoration: none; + color: var(--text-color); + transition: all 0.2s ease; + } + + .resourcepack-link:hover { + background: rgba(255, 255, 255, 0.05); + } + + .resourcepack-icon { + width: 32px; + height: 32px; + color: var(--accent-color); + flex-shrink: 0; + } + + .resourcepack-link div { + flex: 1; + } + + .resourcepack-link strong { + display: block; + font-size: 1.1rem; + margin-bottom: 4px; + } + + .resourcepack-desc { + font-size: 0.9rem; + color: var(--text-muted); + } + + .download-icon { + width: 24px; + height: 24px; + color: var(--text-muted); + flex-shrink: 0; + } + + /* Disable card hover for copy cards */ + #fingerprintCard { + cursor: default !important; + } + + #fingerprintCard:hover { + transform: none !important; + } + + + + +
    +

    + + krzak.org + + Krzak.org - Minecraft +

    + +
    +
    + + Loading server status...
    -
    -
    - - - - - - - - + +
    + + + + + + +
    + Download Resource Pack + Custom vanillatweaks setup +
    + + + + +     -
    • - + + -
    - - Indexed by - LibreCounter - - - LibreCounter - +
    + + Indexed by + LibreCounter + + + LibreCounter + +
    - - - + + - - - + + - + async function updateStatus() { + renderStatus(await fetchServerStatus()); + } + // Initial load and auto-refresh + updateStatus(); + setInterval(updateStatus, REFRESH_INTERVAL); + + diff --git a/styles.css b/styles.css index 1037733..67643f8 100644 --- a/styles.css +++ b/styles.css @@ -1,16 +1,26 @@ :root { - --bg-gradient-1: #2a1a5e; - --bg-gradient-2: #8b4789; - --bg-gradient-3: #f4a261; - --container-bg: rgba(42, 26, 94, 0.7); - --container-border: rgba(244, 162, 97, 0.8); - --text-color: #ffe8d6; - --link-color: #f4a261; - --link-bg: rgba(139, 71, 137, 0.3); - --link-hover-bg: rgba(244, 162, 97, 0.3); - --link-hover-border: rgba(244, 162, 97, 0.8); - --subtitle-color: #dda15e; - --glow-color: rgba(244, 162, 97, 0.7); + /* Deep Twilight Palette */ + --bg-gradient-1: #1a103c; + --bg-gradient-2: #4a2c4e; + --bg-gradient-3: #8b4789; + --bg-gradient-4: #f4a261; + + /* Glass Effect Variables */ + --container-bg: rgba(30, 20, 60, 0.65); + --container-border: rgba(255, 255, 255, 0.1); + --container-highlight: rgba(255, 255, 255, 0.05); + + /* Text & Accents */ + --text-color: #fff0e0; + --text-muted: #d0c0e0; + --accent-color: #f4a261; + --accent-glow: rgba(244, 162, 97, 0.5); + + /* Link Styles */ + --link-bg: rgba(255, 255, 255, 0.05); + --link-hover-bg: rgba(255, 255, 255, 0.1); + --link-border: rgba(255, 255, 255, 0.08); + --link-hover-border: rgba(244, 162, 97, 0.5); } * { @@ -23,26 +33,35 @@ html { body { background: linear-gradient( - var(--bg-gradient-1), - var(--bg-gradient-2), - var(--bg-gradient-3) - ) - no-repeat fixed; + -45deg, + var(--bg-gradient-1), + var(--bg-gradient-2), + var(--bg-gradient-3), + var(--bg-gradient-4) + ); + background-size: 400% 400%; + animation: gradientBG 20s ease infinite; color: var(--text-color); font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", - Arial, sans-serif; + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + sans-serif; margin: 0; - padding: 16px; + padding: 20px; min-height: 100vh; - transition: all 0.5s ease; - position: relative; display: flex; align-items: center; justify-content: center; + overflow-x: hidden; /* Prevent horizontal scroll from effects */ } -body::before { +/* Subtle grain texture overlay */ +body::after { content: ""; position: fixed; top: 0; @@ -51,58 +70,63 @@ body::before { height: 100%; pointer-events: none; z-index: 0; - transition: 0.5s ease; - background: radial-gradient( - circle at 20% 50%, - rgba(255, 255, 255, 0.08) 0%, - transparent 50% - ); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); + opacity: 0.5; } .container { background: var(--container-bg); - border-radius: 20px; - padding: 24px; + border-radius: 24px; + padding: 32px; border: 1px solid var(--container-border); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + border-top: 1px solid var(--container-highlight); /* Highlight for 3D feel */ + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); width: 100%; - max-width: 800px; + max-width: 700px; /* Slightly narrower for a more focused look */ margin: auto; - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); - transition: all 0.3s ease; + box-shadow: + 0 8px 32px 0 rgba(0, 0, 0, 0.4), + inset 0 0 0 1px rgba(255, 255, 255, 0.05); position: relative; z-index: 1; } h1 { - margin: 0 0 16px 0; - font-size: clamp(1.5rem, 5vw, 2rem); - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); + margin: 0 0 24px 0; + font-size: clamp(2rem, 5vw, 2.5rem); + font-weight: 800; + letter-spacing: -0.02em; color: var(--text-color); - transition: color 0.3s ease; + text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); display: flex; align-items: center; - gap: 12px; + justify-content: center; /* Center the title */ + gap: 16px; } h2 { - margin-top: 32px; - margin-bottom: 16px; - font-size: clamp(1.2rem, 4vw, 1.5rem); - color: var(--subtitle-color); - border-bottom: 1px solid rgba(244, 162, 97, 0.3); - padding-bottom: 8px; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); + margin-top: 40px; + margin-bottom: 20px; + font-size: 1.5rem; + color: var(--accent-color); + border-bottom: 2px solid rgba(244, 162, 97, 0.2); + padding-bottom: 10px; } .icon { - width: 32px; - height: 32px; - flex-shrink: 0; - display: inline-flex; + width: 48px; + height: 48px; + display: flex; align-items: center; justify-content: center; + filter: drop-shadow(0 0 8px var(--accent-glow)); + transition: transform 0.5s ease; +} + +/* Rotate icon on hover */ +h1:hover .icon { + transform: rotate(15deg) scale(1.1); } .icon img { @@ -112,184 +136,177 @@ h2 { } p { - color: var(--text-color); - transition: color 0.3s ease; - margin: 16px 0; - font-size: 1rem; + color: var(--text-muted); + margin: 0 0 24px 0; + font-size: 1.05rem; + line-height: 1.6; + text-align: center; } ul { list-style: none; padding: 0; - margin: 20px 0 0 0; -} - -li { - margin-bottom: 12px; -} - -li:last-child { - margin-bottom: 0; + margin: 32px 0 0 0; + display: flex; + flex-direction: column; + gap: 16px; } li a { display: flex; justify-content: space-between; align-items: center; - padding: 18px 20px; - border-radius: 12px; + padding: 16px 24px; + border-radius: 16px; color: var(--text-color); text-decoration: none; - transition: all 0.2s ease; background-color: var(--link-bg); - border: 1px solid transparent; - min-height: 56px; - gap: 12px; - -webkit-tap-highlight-color: transparent; - touch-action: manipulation; + border: 1px solid var(--link-border); + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; + backdrop-filter: blur(4px); /* Extra glass layer */ } -li a::before { +/* Shine effect on hover */ +li a::after { content: ""; position: absolute; top: 0; left: -100%; - width: 100%; + width: 50%; height: 100%; background: linear-gradient( 90deg, transparent, - rgba(244, 162, 97, 0.1), + rgba(255, 255, 255, 0.1), transparent ); + transform: skewX(-20deg); transition: left 0.5s ease; } +li a:hover { + transform: translateY(-2px) scale(1.01); + background-color: var(--link-hover-bg); + border-color: var(--link-hover-border); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.2), + 0 0 15px var(--accent-glow); +} + +li a:hover::after { + left: 150%; + transition: left 0.7s ease; +} + li a:active { transform: scale(0.98); - background-color: var(--link-hover-bg); } li a strong { font-weight: 600; - color: var(--link-color); - transition: color 0.3s ease; - font-size: 1.05rem; + font-size: 1.1rem; + letter-spacing: 0.01em; } li a span { - font-weight: 300; - color: var(--subtitle-color); - transition: color 0.3s ease; + font-weight: 400; + color: var(--text-muted); font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -br { - display: block; - margin: 16px 0; - content: ""; + opacity: 0.8; } /* LibreCounter */ .librecounter { - margin-top: 24px; - padding-top: 16px; - border-top: 1px solid rgba(244, 162, 97, 0.3); + margin-top: 48px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; - justify-content: space-between; + flex-direction: column; /* Stack on mobile, row on desktop if needed */ align-items: center; - gap: 16px; - min-height: 73px; + gap: 12px; } .librecounter-text { - color: var(--text-color); - font-size: 0.9rem; - opacity: 0.9; + color: var(--text-muted); + font-size: 0.85rem; } .librecounter-text a { - color: var(--link-color); + color: var(--accent-color); text-decoration: none; - transition: color 0.2s ease; + font-weight: 500; } .librecounter-text a:hover { - color: var(--subtitle-color); text-decoration: underline; -} - -.librecounter a { - display: inline-block; - transition: - transform 0.2s ease, - opacity 0.2s ease; - flex-shrink: 0; - line-height: 0; -} - -.librecounter a:hover { - transform: scale(1.05); - opacity: 0.9; + text-shadow: 0 0 8px var(--accent-glow); } .librecounter img { - display: block; - height: 64px; - width: auto; - max-width: 100%; + height: 48px; + opacity: 0.8; + transition: opacity 0.3s ease; +} + +.librecounter:hover img { + opacity: 1; } /* Back to top button */ .back-to-top { position: fixed; - bottom: 24px; - right: 24px; - width: 48px; - height: 48px; + bottom: 32px; + right: 32px; + width: 56px; /* Slightly larger */ + height: 56px; border-radius: 50%; - background: var(--link-bg); - border: 1px solid var(--container-border); - color: var(--link-color); + background: rgba(42, 26, 94, 0.8); + border: 1px solid var(--accent-color); + color: var(--accent-color); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; - transition: all 0.3s ease; + transform: translateY(20px); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .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); } +.back-to-top:hover { + background: var(--bg-gradient-3); + color: #fff; + box-shadow: 0 0 20px var(--accent-glow); + transform: translateY(-4px); +} + /* Animations */ +@keyframes gradientBG { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + @keyframes fadeIn { from { opacity: 0; } - to { opacity: 1; } @@ -298,9 +315,8 @@ br { @keyframes slideDown { from { opacity: 0; - transform: translateY(-20px); + transform: translateY(-30px); } - to { opacity: 1; transform: translateY(0); @@ -310,9 +326,8 @@ br { @keyframes slideUp { from { opacity: 0; - transform: translateY(20px); + transform: translateY(30px); } - to { opacity: 1; transform: translateY(0); @@ -320,190 +335,227 @@ br { } .fade-in { - animation: fadeIn 0.6s ease-out forwards; + animation: fadeIn 0.8s ease-out forwards; } - .slide-down { - animation: slideDown 0.6s ease-out forwards; + animation: slideDown 0.8s ease-out forwards; } - .slide-up { - animation: slideUp 0.6s ease-out forwards; + animation: slideUp 0.8s 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) { - body { - padding: 24px; - } - +/* Responsive adjustments */ +@media (max-width: 600px) { .container { - padding: 32px; - border-radius: 20px; + padding: 24px 20px; } h1 { - margin-bottom: 24px; - } - - li { - margin-bottom: 14px; - } -} - -@media (max-width: 400px) { - .container { - padding: 20px; - border-radius: 16px; + font-size: 1.75rem; } li a { - padding: 16px 18px; - flex-direction: column; - align-items: flex-start; - gap: 4px; - } - - li a span { - font-size: 0.85rem; - } - - .back-to-top { - bottom: 16px; - right: 16px; - width: 44px; - height: 44px; + padding: 14px 18px; } } -@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; - } -} - -/* App Gallery Styles */ +/* App Gallery Styles (preserved & enhanced) */ .app-gallery { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - margin-top: 20px; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 16px; + margin-top: 24px; } .app-card { - background: var(--link-bg); - border-radius: 16px; - padding: 20px; + background: rgba(255, 255, 255, 0.03); + border-radius: 20px; + padding: 24px; text-align: center; - position: relative; - border: 1px solid transparent; - transition: all 0.2s ease-out; + border: 1px solid var(--link-border); + transition: all 0.3s ease; text-decoration: none; color: var(--text-color); display: flex; flex-direction: column; align-items: center; - justify-content: space-between; } -@media (hover: hover) { - .app-card:hover { - transform: translateY(-4px) scale(1.03); - background-color: var(--link-hover-bg); - border-color: var(--link-hover-border); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); - } -} - -.app-card:active { - transform: scale(0.98); - background-color: var(--link-hover-bg); +.app-card:hover { + transform: translateY(-5px); + background: rgba(255, 255, 255, 0.08); + border-color: var(--accent-color); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .app-icon { - width: 80px; - height: 80px; - border-radius: 20px; + width: 72px; + height: 72px; + border-radius: 18px; margin-bottom: 16px; - object-fit: cover; - background-color: rgba(255, 255, 255, 0.1); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .app-card h4 { - margin: 0 0 8px 0; - font-size: 1.1rem; - font-weight: 600; - color: var(--link-color); + color: var(--accent-color); + + margin-bottom: 8px; } .app-card p { - font-size: 0.85rem; - margin: 0; - line-height: 1.4; + font-size: 0.9rem; + + color: var(--text-muted); + + margin-bottom: 16px; + flex-grow: 1; - color: var(--text-color); - opacity: 0.9; + + line-height: 1.4; } .app-platforms { - margin-top: 16px; display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; - align-items: center; } .app-platforms a { - background: rgba(244, 162, 97, 0.25); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(244, 162, 97, 0.4); + background: rgba(255, 255, 255, 0.1); + + border: 1px solid var(--container-border); + color: var(--text-color); + text-decoration: none; - font-size: 0.9rem; - font-weight: 500; + + font-size: 0.8rem; + padding: 6px 12px; + border-radius: 12px; - transition: - transform 0.2s ease, - background-color 0.2s ease; - display: inline-block; + + transition: all 0.2s ease; } .app-platforms a:hover { + background: var(--accent-color); + + color: #1a103c; /* Dark text for contrast on accent bg */ + transform: scale(1.05); - background: rgba(244, 162, 97, 0.4); + + box-shadow: 0 0 10px var(--accent-glow); } .app-card.highlighted { - border-color: var(--glow-color); + border-color: var(--accent-color); + box-shadow: - 0 0 12px 2px var(--glow-color), - inset 0 0 15px -5px var(--glow-color); + 0 0 20px var(--accent-glow), + inset 0 0 20px rgba(244, 162, 97, 0.1); +} + +/* --- Parody Section: Kreatyw --- */ + +.kreatyw-link { + background: + radial-gradient( + circle at 60px 50%, + #000 0%, + #000 120px, + transparent 250px + ) + padding-box, + linear-gradient(var(--link-bg), var(--link-bg)) padding-box, + linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff) border-box !important; + + border: 2px solid transparent !important; + + animation: borderRotate 4s linear infinite; + + background-size: + 100% 100%, + 100% 100%, + 400% 400% !important; +} + +.kreatyw-link::after { + display: none !important; /* Remove sideways flash */ +} + +@keyframes borderRotate { + 0% { + background-position: + 0 0, + 0 0, + 0% 50%; + } + + 50% { + background-position: + 0 0, + 0 0, + 100% 50%; + } + + 100% { + background-position: + 0 0, + 0 0, + 0% 50%; + } +} + +.kreatyw-link strong { + color: #fff !important; + + display: flex; + + align-items: center; + + gap: 12px; +} + +.kreatyw-link img { + display: block; + + flex-shrink: 0; +} + +.kreatyw-link span { + color: #00ffff !important; + + font-weight: 600 !important; + + text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); + + animation: aiGlow 2s ease-in-out infinite alternate; +} + +@keyframes aiGlow { + from { + opacity: 0.7; + filter: drop-shadow(0 0 2px #00ffff); + } + + to { + opacity: 1; + filter: drop-shadow(0 0 8px #00ffff); + } +} + +.kreatyw-link:hover { + animation: borderRotate 1s linear infinite !important; + + box-shadow: + 0 0 25px rgba(255, 0, 255, 0.4), + 0 0 50px rgba(0, 255, 255, 0.2) !important; + + border-color: transparent !important; }