Help
RSS
API
Feed
Maltego
Contact
Domain > avalanchemc.net
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2014-12-06
104.28.24.65
(
ClassC
)
2014-12-06
104.28.25.65
(
ClassC
)
2015-03-21
194.63.248.27
(
ClassC
)
2026-02-20
172.67.223.247
(
ClassC
)
Port 443
HTTP/1.1 200 OKDate: Fri, 20 Feb 2026 20:43:56 GMTContent-Type: text/html; charsetutf-8Transfer-Encoding: chunkedConnection: keep-aliveAccess-Control-Allow-Origin: *Cache-Control: public, max-age0, must-revalidatereferrer-policy: strict-origin-when-cross-originx-content-type-options: nosniffReport-To: {group:cf-nel,max_age:604800,endpoints:{url:https://a.nel.cloudflare.com/report/v4?s5%2Fv%2F%2FsubS9BpK3OBQ5iHwO6MvbUGoLwQw388AhUkGwvv1ZgpzfxCu2TP48Qjvl3QIFhlWA3kY3VxPuCWvpvnJMLCRsmLYh2YG%2FiybqDLFA%3D%3D}}Nel: {report_to:cf-nel,success_fraction:0.0,max_age:604800}Server: cloudflarecf-cache-status: DYNAMICCF-RAY: 9d10d6cd19c658c2-PDXalt-svc: h3:443; ma86400 !DOCTYPE html>html langen>head> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1.0> meta namedescription contentWelcome to AvalancheMC - Your ultimate Minecraft server experience with custom features, events, and community.> meta namekeywords contentMinecraft, Server, AvalancheMC, Gaming, Community, Events> meta nameauthor contentAvalancheMC Team> meta namerobots contentindex, follow> meta propertyog:title contentAvalancheMC - Minecraft Server> meta propertyog:description contentJoin the ultimate Minecraft server experience.> meta propertyog:image contentcdn/images/favicon.png> meta propertyog:url contenthttps://avalanchemc.net> meta nametwitter:card contentsummary_large_image> title>AvalancheMC - Ultimate Minecraft Server Experience/title> link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css> link relicon typeimage/webp hrefcdn/images/favicon.png> link relapple-touch-icon hrefcdn/images/favicon.png> link relmanifest hrefsite.webmanifest> !-- Firebase --> script srchttps://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js>/script> script srchttps://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js>/script> script srchttps://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js>/script>/head>body stylemargin: 0; font-family: Roboto, sans-serif; background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); color: white; overflow-x: hidden;> style> * { box-sizing: border-box; } body { min-height: 100vh; } header { position: fixed; top: 0; width: 100%; z-index: 1000; backdrop-filter: blur(20px); background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(15,15,35,0.9) 50%, rgba(0,0,0,0.85) 100%); box-shadow: 0 4px 30px rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; } nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1400px; margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,0.1); } .logo { display: flex; align-items: center; font-size: 1.8rem; font-weight: bold; color: #ff6b6b; text-shadow: 0 0 10px rgba(255,107,107,0.5); cursor: pointer; transition: all 0.3s ease; } .logo:hover { transform: scale(1.05); text-shadow: 0 0 20px rgba(255,107,107,0.8); } .logo img { animation: rotate 10s linear infinite; transition: all 0.3s ease; border-radius: 50%; box-shadow: 0 0 15px rgba(255,107,107,0.5); } .logo img:hover { animation-play-state: paused; transform: scale(1.1); box-shadow: 0 0 25px rgba(255,107,107,0.8); } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .nav-center { display: flex; align-items: center; gap: 2rem; padding: 0 1rem; background: rgba(255,255,255,0.05); border-radius: 25px; } .server-status { display: flex; align-items: center; gap: 0.5rem; color: #4ade80; font-weight: bold; } .status-dot.online { background: #4ade80; animation: pulse 2s infinite; } .status-dot.offline { background: #ef4444; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .search-bar { display: flex; background: rgba(255,255,255,0.1); border-radius: 25px; overflow: hidden; transition: all 0.3s ease; } .search-bar:focus-within { background: rgba(255,255,255,0.2); box-shadow: 0 0 15px rgba(255,107,107,0.3); } .search-bar input { border: none; padding: 0.5rem 1rem; background: transparent; color: white; transition: all 0.3s ease; } .search-bar input::placeholder { color: #ccc; } .search-bar input:focus { outline: none; transform: scale(1.02); } .search-bar button { border: none; background: #ff6b6b; color: white; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.3s ease; } .search-bar button:hover { background: #ffa500; transform: scale(1.05); } .nav-right { display: flex; align-items: center; gap: 1.5rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.1); } nav ul { display: flex; list-style: none; gap: 2rem; margin: 0; } nav li a { color: white; text-decoration: none; transition: all 0.3s; position: relative; } nav li a::after { content: ; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(45deg, #ff6b6b, #ffa500); transition: width 0.3s ease; } nav li a:hover { color: #ff6b6b; transform: translateY(-2px); } nav li a:hover::after { width: 100%; } .user-actions { display: flex; align-items: center; gap: 1rem; } .notification-btn { position: relative; background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; } .notification-btn:hover { transform: scale(1.1); color: #ff6b6b; } .badge { position: absolute; top: -5px; right: -5px; background: #ff6b6b; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .user-profile { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; position: relative; } .user-avatar { width: 35px; height: 35px; border-radius: 50%; border: 2px solid #ff6b6b; } .user-dropdown { position: absolute; top: 100%; right: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); border-radius: 8px; padding: 0.5rem 0; min-width: 150px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1001; } .user-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown a { display: block; padding: 0.5rem 1rem; color: white; text-decoration: none; transition: background 0.3s; } .user-dropdown a:hover { background: rgba(255,255,255,0.1); } .join-btn { background: linear-gradient(45deg, #ff6b6b, #ffa500); border: none; padding: 0.75rem 1.5rem; border-radius: 25px; color: white; cursor: pointer; transition: all 0.3s; font-weight: bold; } .join-btn:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(255,107,107,0.4); } #admin-btn { background: linear-gradient(45deg, #ff6b6b, #ffa500); border: none; color: white; font-size: 1.2rem; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin-right: 0.5rem; } #admin-btn:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(255,107,107,0.4); } #theme-toggle { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; } #theme-toggle:hover { color: #ff6b6b; } .highlight mark { background: #ff6b6b; color: white; padding: 0 2px; border-radius: 2px; } .hero { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 0 2rem; background: url(cdn/images/mcbg.jpg) center/cover no-repeat; position: relative; } .hero::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); } .hero-content { position: relative; z-index: 1; max-width: 800px; text-align: center; } .hero h1 { font-size: 4rem; margin-bottom: 0.5rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(255,107,107,0.5); } .hero h2 { font-size: 2rem; margin-bottom: 1rem; color: #ffffff; font-weight: 300; opacity: 0.9; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } .hero-features { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; } .hero-feature { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 15px; backdrop-filter: blur(10px); transition: all 0.3s ease; min-width: 120px; } .hero-feature:hover { transform: translateY(-5px); background: rgba(255,255,255,0.2); } .hero-feature i { font-size: 2rem; color: #ff6b6b; margin-bottom: 0.5rem; } .hero-feature span { color: white; font-size: 0.9rem; text-align: center; } .hero-stats { display: flex; justify-content: center; gap: 3rem; } .hero-stat { text-align: center; } .hero-stat h3 { font-size: 2.5rem; color: #ff6b6b; margin: 0; text-shadow: 0 0 10px rgba(255,107,107,0.5); } .hero-stat p { color: #ccc; margin: 0.5rem 0 0 0; font-size: 1rem; } .hero-actions { margin-top: 2rem; text-align: center; } .hero-btn { background: linear-gradient(45deg, #ff6b6b, #ffa500); border: none; padding: 1rem 3rem; border-radius: 25px; color: white; text-decoration: none; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; display: inline-block; box-shadow: 0 5px 15px rgba(255,107,107,0.4); } .hero-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(255,107,107,0.6); } .hero button { background: linear-gradient(45deg, #ff6b6b, #ffa500); border: none; padding: 1rem 2rem; border-radius: 25px; color: white; margin: 0 0.5rem; cursor: pointer; transition: transform 0.3s; } .hero button:hover { transform: scale(1.05); } .features { padding: 6rem 2rem; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%); position: relative; overflow: hidden; } .features::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(cdn/images/mcbg.jpg) center/cover no-repeat; opacity: 0.03; z-index: 0; } .features > * { position: relative; z-index: 1; } .features-container { max-width: 1400px; margin: 0 auto; } .features-header { text-align: center; margin-bottom: 4rem; } .features-header h2 { font-size: 3rem; margin-bottom: 1rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; justify-content: center; gap: 1rem; } .features-header h2 i { color: #ff6b6b; } .features-header p { font-size: 1.2rem; color: #ccc; max-width: 600px; margin: 0 auto; } .features-showcase { margin-bottom: 4rem; } .feature-main { margin-bottom: 3rem; } .feature-highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; background: rgba(255,255,255,0.05); border-radius: 25px; padding: 3rem; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; } .feature-highlight::before { content: ; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,107,107,0.1), transparent); transition: left 1s ease; } .feature-highlight:hover::before { left: 100%; } .highlight-content { padding-right: 2rem; } .highlight-badge { background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; display: inline-block; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.5px; } .highlight-content h3 { font-size: 2.2rem; color: white; margin-bottom: 1rem; line-height: 1.3; } .highlight-content p { font-size: 1.1rem; color: #ccc; line-height: 1.6; margin-bottom: 2rem; } .highlight-stats { display: flex; gap: 2rem; } .highlight-stats .stat { text-align: center; } .highlight-stats .stat-number { display: block; font-size: 2rem; font-weight: bold; color: #ff6b6b; margin-bottom: 0.5rem; } .highlight-stats .stat-label { color: #ccc; font-size: 0.9rem; } .highlight-visual { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; } .floating-elements { position: relative; width: 100%; height: 100%; } .floating-cube { position: absolute; width: 60px; height: 60px; background: linear-gradient(45deg, #ff6b6b, #ffa500); border-radius: 15px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 10px 30px rgba(255,107,107,0.3); animation: floatCube 6s ease-in-out infinite; } .floating-cube.cube-1 { top: 20%; left: 20%; animation-delay: 0s; } .floating-cube.cube-2 { top: 60%; right: 20%; animation-delay: 2s; background: linear-gradient(45deg, #4ade80, #22c55e); } .floating-cube.cube-3 { bottom: 20%; left: 50%; animation-delay: 4s; background: linear-gradient(45deg, #3b82f6, #1d4ed8); } @keyframes floatCube { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; } .feature-card.advanced { background: rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; cursor: pointer; } .feature-card.advanced:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.3); border-color: rgba(255,107,107,0.3); } .card-visual { position: relative; margin-bottom: 1.5rem; } .card-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #ff6b6b, #ffa500); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; z-index: 2; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(255,107,107,0.3); } .feature-card.advanced:hover .card-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 15px 40px rgba(255,107,107,0.4); } .card-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,107,107,0.2) 0%, transparent 70%); border-radius: 50%; transition: all 0.3s ease; } .feature-card.advanced:hover .card-glow { width: 150px; height: 150px; opacity: 0.8; } .card-content h4 { font-size: 1.3rem; color: white; margin-bottom: 0.5rem; font-weight: 600; } .card-content p { color: #ccc; line-height: 1.6; margin-bottom: 1rem; font-size: 0.95rem; } .card-metrics { margin-top: 1rem; } .card-metrics .metric { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,107,107,0.1); color: #ff6b6b; padding: 0.5rem 1rem; border-radius: 15px; font-size: 0.85rem; font-weight: 500; } .card-hover-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,107,107,0.05) 0%, rgba(255,165,0,0.05) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .feature-card.advanced:hover .card-hover-effect { opacity: 1; } .features-cta { background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,165,0,0.1) 100%); border-radius: 25px; padding: 3rem; text-align: center; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); } .cta-content h3 { font-size: 2rem; color: white; margin-bottom: 1rem; } .cta-content p { font-size: 1.1rem; color: #ccc; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; } .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .cta-btn { padding: 1rem 2rem; border-radius: 30px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; border: none; } .cta-btn.primary { background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; box-shadow: 0 5px 15px rgba(255,107,107,0.3); } .cta-btn.primary:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,107,107,0.4); } .cta-btn.secondary { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); } .cta-btn.secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); } .stats { padding: 6rem 2rem; background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 100%); position: relative; overflow: hidden; } .stats::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(cdn/images/mcbg.jpg) center/cover no-repeat; opacity: 0.03; z-index: 0; } .stats > * { position: relative; z-index: 1; } .stats-container { max-width: 1400px; margin: 0 auto; } .stats-header { text-align: center; margin-bottom: 4rem; } .stats-header h2 { font-size: 3rem; margin-bottom: 1rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; justify-content: center; gap: 1rem; } .stats-header h2 i { color: #ff6b6b; } .stats-header p { font-size: 1.2rem; color: #ccc; max-width: 500px; margin: 0 auto; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .stat-card.advanced-stat { background: rgba(255,255,255,0.08); border-radius: 25px; padding: 2.5rem; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; cursor: pointer; } .stat-card.advanced-stat:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.3); border-color: rgba(255,107,107,0.3); } .stat-visual { position: relative; margin-bottom: 2rem; text-align: center; } .stat-icon { width: 100px; height: 100px; background: linear-gradient(135deg, #ff6b6b, #ffa500); border-radius: 25px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: white; position: relative; z-index: 2; transition: all 0.3s ease; box-shadow: 0 15px 35px rgba(255,107,107,0.3); margin: 0 auto; } .stat-card.advanced-stat:hover .stat-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 20px 45px rgba(255,107,107,0.4); } .stat-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; background: radial-gradient(circle, rgba(255,107,107,0.15) 0%, transparent 70%); border-radius: 50%; transition: all 0.3s ease; } .stat-card.advanced-stat:hover .stat-glow { width: 170px; height: 170px; opacity: 0.9; } .stat-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .stat-particles .particle { position: absolute; width: 4px; height: 4px; background: rgba(255,107,107,0.6); border-radius: 50%; animation: particleFloat 8s ease-in-out infinite; } .stat-particles .particle-1 { top: 20%; left: 20%; animation-delay: 0s; } .stat-particles .particle-2 { top: 70%; right: 15%; animation-delay: 3s; background: rgba(74, 222, 128, 0.6); } .stat-particles .particle-3 { bottom: 25%; left: 70%; animation-delay: 6s; background: rgba(59, 130, 246, 0.6); } @keyframes particleFloat { 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.6; } 50% { transform: translateY(-20px) scale(1.2); opacity: 1; } } .stat-content { text-align: center; } .stat-number { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; } .stat-number .animated-counter, .stat-number span { font-size: 3rem; font-weight: bold; color: #ff6b6b; line-height: 1; } .stat-number .stat-plus { font-size: 2rem; color: #ffa500; } .stat-content h4 { font-size: 1.4rem; color: white; margin-bottom: 1rem; font-weight: 600; } .stat-trend { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(74, 222, 128, 0.1); color: #4ade80; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .stat-trend i { font-size: 0.8rem; } .stat-hover-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,107,107,0.03) 0%, rgba(255,165,0,0.03) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border-radius: 25px; } .stat-card.advanced-stat:hover .stat-hover-effect { opacity: 1; } .stats-footer { text-align: center; padding: 2rem; background: rgba(255,255,255,0.05); border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); } .live-indicator { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; } .pulse-dot { width: 8px; height: 8px; background: #4ade80; border-radius: 50%; animation: pulse 2s infinite; } .live-indicator span { color: #4ade80; font-weight: 600; font-size: 0.9rem; } .stats-footer p { color: #ccc; font-size: 0.9rem; margin: 0; } footer { background: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, rgba(15,15,35,0.98) 50%, rgba(0,0,0,0.95) 100%); color: white; position: relative; overflow: hidden; margin-top: 4rem; } footer::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(cdn/images/mcbg.jpg) center/cover no-repeat; opacity: 0.05; z-index: 0; } footer > * { position: relative; z-index: 1; } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding: 3rem 0; align-items: start; } .footer-brand { padding-right: 2rem; } .footer-logo { display: flex; align-items: center; font-size: 1.5rem; font-weight: bold; color: #ff6b6b; margin-bottom: 1rem; } .footer-logo img { animation: rotate 10s linear infinite; border-radius: 50%; box-shadow: 0 0 10px rgba(255,107,107,0.3); } .footer-logo span { background: linear-gradient(45deg, #ff6b6b, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-brand p { color: #ccc; line-height: 1.6; margin: 0; font-size: 0.95rem; } .footer-nav { display: flex; gap: 3rem; } .nav-section h4 { color: #ff6b6b; margin: 0 0 1rem 0; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .nav-section ul { list-style: none; padding: 0; margin: 0; } .nav-section li { margin-bottom: 0.5rem; } .nav-section a { color: #ccc; text-decoration: none; transition: all 0.3s ease; font-size: 0.9rem; } .nav-section a:hover { color: #ff6b6b; transform: translateX(5px); } .footer-server { background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); } .footer-server h4 { color: #ff6b6b; margin: 0 0 1rem 0; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .server-details p { margin: 0.5rem 0; color: #ccc; font-size: 0.9rem; } .server-details strong { color: white; } .server-status-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; } .status-dot { width: 10px; height: 10px; border-radius: 50%; animation: pulse 2s infinite; } .status-dot.online { background: #4ade80; } .status-dot.offline { background: #ef4444; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 2rem 0; } .footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { margin: 0; color: #888; font-size: 0.85rem; } .footer-links { display: flex; gap: 1rem; align-items: center; } .footer-links a { color: #ccc; text-decoration: none; font-size: 0.85rem; transition: color 0.3s; } .footer-links a:hover { color: #ff6b6b; } .footer-links span { color: #666; } .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; background: linear-gradient(45deg, #ff6b6b, #ffa500); border: none; border-radius: 50%; color: white; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; box-shadow: 0 5px 15px rgba(255,107,107,0.4); } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { transform: scale(1.1); box-shadow: 0 10px 25px rgba(255,107,107,0.6); } .news { padding: 5rem 2rem; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%); position: relative; overflow: hidden; } .news::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(cdn/images/mcbg.jpg) center/cover no-repeat; opacity: 0.02; z-index: 0; } .news > * { position: relative; z-index: 1; } .news-container { max-width: 1400px; margin: 0 auto; } .news-header { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin-bottom: 3rem; padding: 2rem; background: rgba(255,255,255,0.05); border-radius: 20px; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); } .news-title-section h2 { margin: 0; font-size: 2.8rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: 1rem; } .news-title-section h2 i { color: #ff6b6b; } .news-title-section p { margin: 0.5rem 0 0 0; color: #ccc; font-size: 1.1rem; } .news-controls { display: flex; gap: 2rem; align-items: center; } .news-filter { display: flex; gap: 0.5rem; background: rgba(255,255,255,0.05); padding: 0.5rem; border-radius: 25px; } .filter-btn { background: none; border: none; padding: 0.75rem 1.5rem; border-radius: 20px; color: #ccc; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; font-weight: 500; } .filter-btn:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); } .filter-btn.active { background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; box-shadow: 0 4px 15px rgba(255,107,107,0.3); } .news-sort select { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 25px; padding: 0.75rem 1.5rem; color: white; font-size: 0.9rem; cursor: pointer; backdrop-filter: blur(10px); } .news-sort select:focus { outline: none; border-color: #ff6b6b; box-shadow: 0 0 10px rgba(255,107,107,0.3); } .news-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .stat-item { text-align: center; padding: 1.5rem; background: rgba(255,255,255,0.05); border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); } .stat-number { display: block; font-size: 2.5rem; font-weight: bold; color: #ff6b6b; margin-bottom: 0.5rem; } .stat-label { color: #ccc; font-size: 0.9rem; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .news-card { background: rgba(255,255,255,0.08); border-radius: 20px; overflow: hidden; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; transform: translateY(50px) scale(0.95); box-shadow: 0 10px 40px rgba(0,0,0,0.2); position: relative; } .news-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 60px rgba(0,0,0,0.3); border-color: rgba(255,107,107,0.3); } .news-card.loaded { opacity: 1; transform: translateY(0) scale(1); } .news-card-image { position: relative; height: 200px; overflow: hidden; } .news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .news-card:hover .news-card-image img { transform: scale(1.1); } .news-card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,165,0,0.1) 100%); opacity: 0; transition: opacity 0.3s ease; } .news-card:hover .news-card-overlay { opacity: 1; } .news-card-category { position: absolute; top: 1rem; left: 1rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; } .news-card-content { padding: 2rem; } .news-card-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .news-card-date { background: rgba(255,107,107,0.1); color: #ff6b6b; padding: 0.5rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; } .news-card-author { display: flex; align-items: center; gap: 0.5rem; color: #ccc; font-size: 0.9rem; } .news-card-author img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ff6b6b; } .news-card-title { margin: 0 0 1rem 0; font-size: 1.4rem; font-weight: 600; color: white; line-height: 1.3; } .news-card-excerpt { color: #ccc; line-height: 1.6; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-card-footer { display: flex; justify-content: space-between; align-items: center; } .news-card-stats { display: flex; gap: 1rem; color: #888; font-size: 0.9rem; } .news-card-stats span { display: flex; align-items: center; gap: 0.3rem; } .heart-btn { cursor: pointer; transition: all 0.3s ease; padding: 0.25rem; border-radius: 8px; } .heart-btn:hover { background: rgba(255,107,107,0.1); transform: scale(1.05); } .heart-btn .fa-heart { transition: all 0.3s ease; } .heart-btn .fa-heart.liked { color: #ff6b6b; transform: scale(1.2); } .heart-btn:hover .fa-heart:not(.liked) { color: #ff6b6b; transform: scale(1.1); } .news-card-actions { display: flex; gap: 0.5rem; } .news-card-btn { background: none; border: 1px solid rgba(255,107,107,0.3); color: #ff6b6b; padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-size: 0.85rem; } .news-card-btn:hover { background: #ff6b6b; color: white; transform: translateY(-2px); } .news-card-btn.primary { background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; border: none; } .news-card-btn.primary:hover { box-shadow: 0 5px 15px rgba(255,107,107,0.4); } /* Loading and Error States */ .news-loading, .no-news, .error { text-align: center; padding: 3rem; color: var(--text-secondary); } .loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(255,107,107,0.3); border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .news-actions { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem; } .load-more-btn { background: linear-gradient(45deg, #ff6b6b, #ffa500); border: none; padding: 1rem 2rem; border-radius: 30px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255,107,107,0.3); display: flex; align-items: center; gap: 0.5rem; } .load-more-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,107,107,0.4); } .load-more-btn.loading { opacity: 0.7; cursor: not-allowed; } .load-more-btn.loading i { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .news-pagination { display: flex; gap: 0.5rem; } .page-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 0.75rem 1rem; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .page-btn:hover, .page-btn.active { background: #ff6b6b; border-color: #ff6b6b; } /* News Modal Styles */ .news-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; } .news-modal.active { display: flex; align-items: center; justify-content: center; } .news-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); animation: fadeIn 0.3s ease; } .news-modal-content { position: relative; background: linear-gradient(135deg, rgba(15,15,35,0.95) 0%, rgba(26,26,46,0.98) 50%, rgba(15,15,35,0.95) 100%); border-radius: 20px; width: 90%; max-width: 800px; max-height: 90vh; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.6); animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(255,255,255,0.1); } .news-modal-header { display: flex; justify-content: flex-end; padding: 1.5rem 2rem 0; } .news-modal-close { background: none; border: none; color: #666; font-size: 1.5rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: all 0.3s ease; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .news-modal-close:hover { background: rgba(255,107,107,0.1); color: #ff6b6b; transform: rotate(90deg); } .news-modal-body { padding: 0 2rem 2rem; max-height: calc(90vh - 80px); overflow-y: auto; } .news-modal-body::-webkit-scrollbar { width: 6px; } .news-modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; } .news-modal-body::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #ff6b6b, #ffa500); border-radius: 10px; } .news-modal-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #e55a5a, #e6930a); } /* Modal Content Styles */ .modal-news-header { margin-bottom: 2rem; } .modal-news-category { display: inline-block; background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1rem; } .modal-news-title { font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 1rem; line-height: 1.2; } .modal-news-meta { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .modal-news-author { display: flex; align-items: center; gap: 0.75rem; } .modal-news-author img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ff6b6b; } .modal-news-author-info { display: flex; flex-direction: column; } .modal-news-author-name { font-weight: 600; color: white; } .modal-news-date { color: #ccc; font-size: 0.9rem; } .modal-news-stats { display: flex; gap: 1.5rem; color: #ccc; font-size: 0.9rem; } .modal-news-stats span { display: flex; align-items: center; gap: 0.3rem; } .modal-news-image { width: 100%; height: 300px; object-fit: cover; border-radius: 15px; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .modal-news-content { line-height: 1.8; color: #ddd; font-size: 1.1rem; margin-bottom: 2rem; } .modal-news-content h2 { color: white; margin: 2rem 0 1rem; font-size: 1.6rem; } .modal-news-content h3 { color: white; margin: 1.5rem 0 1rem; font-size: 1.4rem; } .modal-news-content p { margin-bottom: 1.5rem; } .modal-news-content ul, .modal-news-content ol { margin-bottom: 1.5rem; padding-left: 2rem; } .modal-news-content li { margin-bottom: 0.5rem; } .modal-news-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .modal-news-tag { background: rgba(255,107,107,0.1); color: #ff6b6b; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .modal-news-actions { display: flex; gap: 1rem; justify-content: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); } .modal-news-share { background: linear-gradient(45deg, #4267B2, #365899); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; } .modal-news-share:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(66, 103, 178, 0.4); } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.8) translateY(-50px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes heartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); color: #ff4757; } 100% { transform: scale(1); } } .social { padding: 6rem 2rem; background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 100%); position: relative; overflow: hidden; } .social::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(cdn/images/mcbg.jpg) center/cover no-repeat; opacity: 0.03; z-index: 0; } .social > * { position: relative; z-index: 1; } .social-container { max-width: 1400px; margin: 0 auto; } .social-header { text-align: center; margin-bottom: 4rem; position: relative; } .social-header h2 { font-size: 3rem; margin-bottom: 1rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; justify-content: center; gap: 1rem; position: relative; } .social-header h2 i { color: #ff6b6b; animation: pulse 2s infinite; } .social-header p { font-size: 1.2rem; color: #ccc; max-width: 600px; margin: 0 auto; position: relative; } .social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 4rem; } .social-card.advanced-social { background: rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; cursor: pointer; } .social-card.advanced-social:hover { transform: translateY(-15px) scale(1.03); box-shadow: 0 25px 50px rgba(0,0,0,0.4); border-color: rgba(255,107,107,0.4); } .social-visual { position: relative; margin-bottom: 1.5rem; text-align: center; } .social-icon-large { width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: white; position: relative; z-index: 2; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin: 0 auto; } .social-card.advanced-social:hover .social-icon-large { transform: scale(1.2) rotate(10deg); box-shadow: 0 15px 40px rgba(0,0,0,0.4); } .discord-bg { background: linear-gradient(135deg, #5865f2, #7289da); } .instagram-bg { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .youtube-bg { background: linear-gradient(135deg, #ff0000, #cc0000); } .tiktok-bg { background: linear-gradient(135deg, #000000, #333333); } .social-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: radial-gradient(circle, rgba(88, 101, 242, 0.15) 0%, transparent 70%); border-radius: 50%; transition: all 0.4s ease; opacity: 0; } .social-carddata-platformdiscord:hover .social-glow { background: radial-gradient(circle, rgba(88, 101, 242, 0.3) 0%, transparent 70%); opacity: 1; width: 150px; height: 150px; } .social-carddata-platforminstagram:hover .social-glow { background: radial-gradient(circle, rgba(240, 148, 51, 0.3) 0%, transparent 70%); opacity: 1; width: 150px; height: 150px; } .social-carddata-platformyoutube:hover .social-glow { background: radial-gradient(circle, rgba(255, 0, 0, 0.3) 0%, transparent 70%); opacity: 1; width: 150px; height: 150px; } .social-carddata-platformtiktok:hover .social-glow { background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, transparent 70%); opacity: 1; width: 150px; height: 150px; } .social-stats { position: absolute; top: -10px; right: -10px; background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; padding: 0.5rem 0.75rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 4px 12px rgba(255,107,107,0.4); animation: bounceIn 0.6s ease; z-index: 3; } .member-count { display: block; font-size: 1rem; font-weight: bold; } .member-label { display: block; font-size: 0.7rem; opacity: 0.9; } .social-content { text-align: center; } .social-content h4 { font-size: 1.4rem; color: white; margin-bottom: 0.5rem; font-weight: 600; transition: color 0.3s ease; } .social-card.advanced-social:hover .social-content h4 { color: #ff6b6b; } .social-content p { color: #ccc; line-height: 1.6; margin-bottom: 1rem; font-size: 0.95rem; transition: color 0.3s ease; } .social-card.advanced-social:hover .social-content p { color: #ddd; } .social-features { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .feature-tag { background: rgba(255,107,107,0.1); color: #ff6b6b; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 0.25rem; transition: all 0.3s ease; border: 1px solid transparent; } .social-card.advanced-social:hover .feature-tag { background: rgba(255,107,107,0.2); border-color: rgba(255,107,107,0.3); transform: scale(1.05); } .social-hover-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,107,107,0.05) 0%, rgba(255,165,0,0.05) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; border-radius: 20px; } .social-card.advanced-social:hover .social-hover-effect { opacity: 1; } .social-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; } .social-particle { position: absolute; width: 3px; height: 3px; background: rgba(255,107,107,0.6); border-radius: 50%; animation: socialFloat 6s ease-in-out infinite; } .social-carddata-platformdiscord .social-particle { background: rgba(88, 101, 242, 0.6); } .social-carddata-platforminstagram .social-particle { background: rgba(240, 148, 51, 0.6); } .social-carddata-platformyoutube .social-particle { background: rgba(255, 0, 0, 0.6); } .social-carddata-platformtiktok .social-particle { background: rgba(255, 107, 107, 0.6); } @keyframes socialFloat { 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.3; } 50% { transform: translateY(-15px) scale(1.2); opacity: 0.8; } } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } } .social-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; transition: all 0.3s ease; } .social-link:hover { background: rgba(255,107,107,0.05); } /* Badge Animations */ @keyframes badgePulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Badge Ripple Effect */ .badge-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; background: rgba(255,255,255,0.6); border-radius: 50%; animation: badgeRipple 0.6s ease-out; pointer-events: none; } @keyframes badgeRipple { to { width: 200px; height: 200px; opacity: 0; } } .event-showcase { padding: 5rem 2rem; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%); position: relative; overflow: hidden; } .event-showcase::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(cdn/images/mcbg.jpg) center/cover no-repeat; opacity: 0.03; z-index: 0; } .event-showcase > * { position: relative; z-index: 1; } .event-container { max-width: 1400px; margin: 0 auto; } .event-header { text-align: center; margin-bottom: 4rem; } .event-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; padding: 0.75rem 1.5rem; border-radius: 30px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1.5rem; box-shadow: 0 8px 25px rgba(255,107,107,0.3); } .event-header h2 { font-size: 3.5rem; margin-bottom: 1rem; background: linear-gradient(45deg, #ff6b6b, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; } .event-subtitle { font-size: 1.3rem; color: #ccc; max-width: 600px; margin: 0 auto; } .event-main { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .event-visual { position: relative; } .event-image { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .event-image img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.5s ease; } .event-image:hover img { transform: scale(1.05); } .event-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,165,0,0.1) 100%); opacity: 0; transition: opacity 0.3s ease; } .event-image:hover .event-overlay { opacity: 1; } .event-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .event-particle { position: absolute; width: 4px; height: 4px; background: rgba(255,107,107,0.8); border-radius: 50%; animation: eventFloat 8s ease-in-out infinite; } @keyframes eventFloat { 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.3; } 50% { transform: translateY(-20px) scale(1.5); opacity: 1; } } .event-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; } .stat-item { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.08); padding: 1rem; border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; } .stat-item:hover { transform: translateY(-3px); background: rgba(255,255,255,0.12); } .stat-icon { width: 50px; height: 50px; background: linear-gradient(45deg, #ff6b6b, #ffa500); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; } .stat-info { flex: 1; } .stat-number { display: block; font-size: 1.5rem; font-weight: bold; color: #ff6b6b; } .stat-label { display: block; font-size: 0.85rem; color: #ccc; } .event-details { display: flex; flex-direction: column; gap: 2rem; } .event-description h3 { color: #ff6b6b; margin-bottom: 1rem; font-size: 1.5rem; } .event-description p { color: #ccc; line-height: 1.7; margin-bottom: 1.5rem; } .event-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .feature { display: flex; align-items: center; gap: 0.75rem; background: rgba(255,255,255,0.05); padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; } .feature:hover { background: rgba(255,255,255,0.1); transform: translateX(5px); } .feature i { color: #ff6b6b; font-size: 1.1rem; } .feature span { color: white; font-weight: 500; } .countdown-advanced { background: rgba(255,255,255,0.08); padding: 2rem; border-radius: 20px; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); } .countdown-advanced h3 { color: #ff6b6b; margin-bottom: 2rem; text-align: center; font-size: 1.3rem; } .countdown-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .countdown-unit { text-align: center; } .countdown-circle { position: relative; width: 80px; height: 80px; margin: 0 auto 0.5rem; } .countdown-progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#ff6b6b 0deg, transparent 0deg); transition: all 0.3s ease; } .countdown-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: bold; color: white; } .countdown-label { color: #ccc; font-size: 0.85rem; font-weight: 500; } .event-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; } .event-btn { padding: 1rem 2rem; border-radius: 30px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; border: none; } .event-btn.primary { background: linear-gradient(45deg, #ff6b6b, #ffa500); color: white; box-shadow: 0 5px 15px rgba(255,107,107,0.3); } .event-btn.primary:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,107,107,0.4); } .event-btn.secondary { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); } .event-btn.secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); } body.dark-mode { background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%); } body.dark-mode header { background: rgba(255,255,255,0.1); } body.dark-mode .feature-card, body.dark-mode .news-card { background: rgba(0,0,0,0.8); } .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); animation: fadeIn 0.5s ease; justify-content: center; align-items: center; } .modal-content { background: rgba(255,255,255,0.1); backdrop-filter: blur(15px); margin: auto; padding: 2rem; border-radius: 20px; width: 80%; max-width: 600px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.6); animation: slideIn 0.6s ease; border: 1px solid rgba(255,255,255,0.2); position: relative; } .modal-content::-webkit-scrollbar { width: 8px; } .modal-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 10px; } .modal-content::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #0078D4, #005a9e); border-radius: 10px; transition: all 0.3s ease; } .modal-content::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #005a9e, #004080); box-shadow: 0 0 10px rgba(0, 120, 212, 0.5); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(-50px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .close { color: #aaa; position: absolute; top: 15px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; transition: all 0.3s; } .close:hover { color: white; transform: rotate(90deg); } .modal-btn { background: linear-gradient(45deg, #ff6b6b, #ffa500); border: none; padding: 0.75rem 1.5rem; border-radius: 25px; color: white; cursor: pointer; margin-top: 1rem; transition: all 0.3s; font-weight: bold; } .modal-btn:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(255,107,107,0.4); } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { nav { flex-direction: column; gap: 1rem; } nav ul { flex-wrap: wrap; justify-content: center; } .hero { flex-direction: column; text-align: center; } .hero h1 { font-size: 2rem; } .stats { padding: 4rem 1rem; } .stats-header h2 { font-size: 2.2rem; } .stats-grid { grid-template-columns: 1fr; } .stat-card.advanced-stat { padding: 2rem; } .stat-icon { width: 80px; height: 80px; font-size: 2rem; } .stat-number .animated-counter, .stat-number span { font-size: 2.5rem; } .stat-content h4 { font-size: 1.2rem; } .stats-footer { padding: 1.5rem 1rem; } .features { padding: 4rem 1rem; } .features-header h2 { font-size: 2.2rem; } .feature-highlight { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; text-align: center; } .highlight-content { padding-right: 0; } .highlight-visual { height: 200px; } .floating-cube { width: 40px; height: 40px; font-size: 1rem; } .features-grid { grid-template-columns: 1fr; } .feature-card.advanced { padding: 1.5rem; } .card-icon { width: 60px; height: 60px; font-size: 1.5rem; } .card-content h4 { font-size: 1.1rem; } .features-cta { padding: 2rem 1rem; } .cta-content h3 { font-size: 1.6rem; } .cta-buttons { flex-direction: column; align-items: center; } .cta-btn { width: 100%; max-width: 250px; justify-content: center; } .news-header { grid-template-columns: 1fr; gap: 1rem; text-align: center; } .news-controls { flex-direction: column; gap: 1rem; width: 100%; } .news-filter { justify-content: center; flex-wrap: wrap; } .news-stats { grid-template-columns: repeat(3, 1fr); } .news-grid { grid-template-columns: 1fr; } .news-card-content { padding: 1.5rem; } .news-card-title { font-size: 1.2rem; } .news-actions { padding: 1rem; } .news-modal-content { width: 95%; max-height: 95vh; } .modal-news-title { font-size: 1.8rem; } .modal-news-meta { flex-direction: column; align-items: flex-start; gap: 1rem; } .modal-news-stats { justify-content: flex-start; } .modal-news-actions { flex-direction: column; gap: 0.5rem; } .event-showcase { padding: 3rem 1rem; } .event-header h2 { font-size: 2.5rem; } .event-main { grid-template-columns: 1fr; gap: 2rem; } .event-stats { grid-template-columns: 1fr; gap: 0.75rem; } .stat-item { padding: 0.75rem; } .countdown-units { grid-template-columns: 1fr; gap: 1rem; } .countdown-circle { width: 60px; height: 60px; } .countdown-number { font-size: 1.2rem; } .event-actions { flex-direction: column; align-items: center; } .event-btn { width: 100%; max-width: 250px; justify-content: center; } .event-features { grid-template-columns: 1fr; } .social-grid { grid-template-columns: 1fr; } .social-header h2 { font-size: 2.2rem; } .social-card.advanced-social { padding: 1.5rem; } .social-icon-large { width: 60px; height: 60px; font-size: 2rem; } .social-stats { top: -5px; right: -5px; padding: 0.4rem 0.6rem; font-size: 0.7rem; } .social-content h4 { font-size: 1.2rem; } .cta-message p { font-size: 1rem; } .back-to-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; font-size: 1rem; } .footer-main { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .footer-nav { flex-direction: column; gap: 2rem; } .footer-server { margin-top: 2rem; } .footer-bottom-content { flex-direction: column; gap: 1rem; text-align: center; } .footer-links { justify-content: center; } } /style> header> nav> div classlogo> img srccdn/images/favicon.png altLogo stylewidth: 40px; height: 40px; margin-right: 10px;> span>AvalancheMC/span> /div> div classnav-center> div classserver-status> span classstatus-dot online>/span> span>Server Online - 1,247 Players/span> /div> div classsearch-bar> input typetext placeholderSearch players, builds...> button>i classfas fa-search>/i>/button> /div> /div> div classnav-right> ul> li>a href#home>i classfas fa-home>/i> Home/a>/li> li>a href#community>i classfas fa-users>/i> Community/a>/li> /ul> div classuser-actions styledisplay: none;> button classnotification-btn>i classfas fa-bell>/i>span classbadge>3/span>/button> div classuser-profile styleposition: relative;> img srccdn/images/myavatar.webp altUser classuser-avatar> span>Player123/span> i classfas fa-chevron-down>/i> div classuser-dropdown> a href#>i classfas fa-user>/i> Profile/a> a href#>i classfas fa-cog>/i> Settings/a> a href# onclickfirebase.auth().signOut()>i classfas fa-sign-out-alt>/i> Logout/a> /div> /div> /div> button idadmin-btn titleAdmin Login>i classfas fa-user-shield>/i>/button> button idtheme-toggle>i classfas fa-moon>/i>/button> /div> /nav> /header> section idhome classhero> div classhero-content> h1>AvalancheMC/h1> h2>Welcome, to the most advanced, most enjoyable Minecraft server experience./h2> p>Join thousands of players in epic adventures, custom game modes, and a thriving community. Build, explore, and conquer in AvalancheMC with cutting-edge features designed for maximum fun and excitement./p> div classhero-features> div classhero-feature> i classfas fa-rocket>/i> span>Lightning-Fast Performance/span> /div> div classhero-feature> i classfas fa-shield-alt>/i> span>Advanced Anti-Cheat System/span> /div> div classhero-feature> i classfas fa-users>/i> span>24/7 Community Support/span> /div> div classhero-feature> i classfas fa-trophy>/i> span>Daily Tournaments & Events/span> /div> div classhero-feature> i classfas fa-cube>/i> span>Custom Game Modes/span> /div> div classhero-feature> i classfas fa-palette>/i> span>Unique Cosmetics & Ranks/span> /div> /div> div classhero-stats> div classhero-stat> h3 idmax-online>0/h3> p>Max Online (Last Hour)/p> /div> div classhero-stat> h3 idcurrent-online>0/h3> p>Currently Online/p> /div> div classhero-stat> h3 idserver-status>Offline/h3> p>Server Status/p> /div> /div> /div> /section> section idstore classfeatures> div classfeatures-container> div classfeatures-header> h2>i classfas fa-star>/i> Why Choose AvalancheMC?/h2> p>Experience the ultimate Minecraft server with cutting-edge features designed for modern gamers/p> /div> div classfeatures-showcase> div classfeature-main> div classfeature-highlight> div classhighlight-content> div classhighlight-badge>FEATURED/div> h3>Next-Gen Gaming Experience/h3> p>Immerse yourself in a revolutionary Minecraft server that combines classic gameplay with modern innovations./p> div classhighlight-stats> div classstat> span classstat-number>99.9%/span> span classstat-label>Uptime/span> /div> div classstat> span classstat-number>10+/span> span classstat-label>Players/span> /div> div classstat> span classstat-number>24/7/span> span classstat-label>Support/span> /div> /div> /div> div classhighlight-visual> div classfloating-elements> div classfloating-cube cube-1>i classfas fa-cube>/i>/div> div classfloating-cube cube-2>i classfas fa-cube>/i>/div> div classfloating-cube cube-3>i classfas fa-cube>/i>/div> /div> /div> /div> /div> div classfeatures-grid> div classfeature-card advanced data-featurecommunity> div classcard-visual> div classcard-icon> i classfas fa-users>/i> /div> div classcard-glow>/div> /div> div classcard-content> h4>Thriving Community/h4> p>Join thousands of passionate players in our inclusive and welcoming community./p> div classcard-metrics> span classmetric>i classfas fa-user-friends>/i> 39+ Members/span> /div> /div> div classcard-hover-effect>/div> /div> div classfeature-card advanced data-featuregamemodes> div classcard-visual> div classcard-icon> i classfas fa-dungeon>/i> /div> div classcard-glow>/div> /div> div classcard-content> h4>Innovative Game Modes/h4> p>Explore custom-designed game modes that push the boundaries of Minecraft./p> div classcard-metrics> span classmetric>i classfas fa-gamepad>/i> 1 Mode/span> /div> /div> div classcard-hover-effect>/div> /div> div classfeature-card advanced data-featuresecurity> div classcard-visual> div classcard-icon> i classfas fa-shield-alt>/i> /div> div classcard-glow>/div> /div> div classcard-content> h4>Advanced Security/h4> p>AI-powered anti-cheat and protection systems ensure fair play for everyone./p> div classcard-metrics> span classmetric>i classfas fa-lock>/i> 100% Secure/span> /div> /div> div classcard-hover-effect>/div> /div> div classfeature-card advanced data-featureevents> div classcard-visual> div classcard-icon> i classfas fa-trophy>/i> /div> div classcard-glow>/div> /div> div classcard-content> h4>Epic Tournaments/h4> p>Compete in regular tournaments with exclusive rewards and recognition./p> div classcard-metrics> span classmetric>i classfas fa-calendar>/i> Weekly Events/span> /div> /div> div classcard-hover-effect>/div> /div> div classfeature-card advanced data-featuresupport> div classcard-visual> div classcard-icon> i classfas fa-headset>/i> /div> div classcard-glow>/div> /div> div classcard-content> h4>Elite Support/h4> p>Round-the-clock assistance from our dedicated professional support team./p> div classcard-metrics> span classmetric>i classfas fa-clock>/i> 24/7 Available/span> /div> /div> div classcard-hover-effect>/div> /div> /div> /div> div classfeatures-cta> div classcta-content> h3>Ready to Experience Excellence?/h3> p>Join AvalancheMC today and discover why were the premier Minecraft server./p> div classcta-buttons> button classcta-btn primary onclickwindow.location.href#home> i classfas fa-play>/i> Join Server /button> button classcta-btn secondary onclickwindow.location.href#community> i classfas fa-users>/i> Join Community /button> /div> /div> /div> /div> /section> section classstats> div classstats-container> div classstats-header> h2>i classfas fa-chart-line>/i> Server Statistics/h2> p>Real-time metrics showcasing our thriving community/p> /div> div classstats-grid> div classstat-card advanced-stat data-statplayers> div classstat-visual> div classstat-icon> i classfas fa-users>/i> /div> div classstat-glow>/div> div classstat-particles> div classparticle particle-1>/div> div classparticle particle-2>/div> div classparticle particle-3>/div> /div> /div> div classstat-content> div classstat-number> span classanimated-counter data-target10>0/span> span classstat-plus>+/span> /div> h4>Active Players/h4> div classstat-trend> i classfas fa-arrow-up>/i> span>Loading.../span> /div> /div> div classstat-hover-effect>/div> /div> div classstat-card advanced-stat data-statbuilds> div classstat-visual> div classstat-icon> i classfas fa-cube>/i> /div> div classstat-glow>/div> div classstat-particles> div classparticle particle-1>/div> div classparticle particle-2>/div> div classparticle particle-3>/div> /div> /div> div classstat-content> div classstat-number> span classanimated-counter data-target20>0/span> span classstat-plus>+/span> /div> h4>Unique Builds/h4> div classstat-trend> i classfas fa-arrow-up>/i> span>Loading.../span> /div> /div> div classstat-hover-effect>/div> /div> div classstat-card advanced-stat data-statuptime> div classstat-visual> div classstat-icon> i classfas fa-clock>/i> /div> div classstat-glow>/div> div classstat-particles> div classparticle particle-1>/div> div classparticle particle-2>/div> div classparticle particle-3>/div> /div> /div> div classstat-content> div classstat-number> span>24/7/span> /div> h4>Server Uptime/h4> div classstat-trend> i classfas fa-check-circle>/i> span>99.9% reliability/span> /div> /div> div classstat-hover-effect>/div> /div> /div> div classstats-footer> div classlive-indicator> div classpulse-dot>/div> span>Live Statistics/span> /div> p>Updated in real-time • Join the growing community/p> /div> /div> /section> section idcommunity classsocial> div classsocial-container> div classsocial-header> h2>i classfas fa-globe>/i> Join Our Community/h2> p>Connect with thousands of players across multiple platforms/p> /div> div classsocial-grid> div classsocial-card advanced-social data-platformdiscord> div classsocial-visual> div classsocial-icon-large discord-bg> i classfab fa-discord>/i> /div> div classsocial-glow>/div> div classsocial-stats> span classmember-count>47/span> span classmember-label>Members/span> /div> /div> div classsocial-content> h4>Discord Server/h4> p>Official community hub for chat, events, and support/p> div classsocial-features> span classfeature-tag>i classfas fa-comments>/i> Live Chat/span> span classfeature-tag>i classfas fa-calendar>/i> Events/span> span classfeature-tag>i classfas fa-headset>/i> Support/span> /div> /div> div classsocial-hover-effect>/div> a hrefhttps://discord.gg/avalanchemc classsocial-link target_blank>/a> /div> div classsocial-card advanced-social data-platforminstagram> div classsocial-visual> div classsocial-icon-large instagram-bg> i classfab fa-instagram>/i> /div> div classsocial-glow>/div> div classsocial-stats> span classmember-count>0/span> span classmember-label>Followers/span> /div> /div> div classsocial-content> h4>Instagram/h4> p>Behind-the-scenes content, builds showcase, and daily updates/p> div classsocial-features> span classfeature-tag>i classfas fa-camera>/i> Photos/span> span classfeature-tag>i classfas fa-video>/i> Stories/span> span classfeature-tag>i classfas fa-heart>/i> Content/span> /div> /div> div classsocial-hover-effect>/div> a hrefhttps://www.instagram.com/avalanchemcofficial?igshMTRkOW90OGdsenR6Mg%3D%3D&utm_sourceqr classsocial-link target_blank>/a> /div> div classsocial-card advanced-social data-platformyoutube> div classsocial-visual> div classsocial-icon-large youtube-bg> i classfab fa-youtube>/i> /div> div classsocial-glow>/div> div classsocial-stats> span classmember-count>0/span> span classmember-label>Subscribers/span> /div> /div> div classsocial-content> h4>YouTube Channel/h4> p>Tutorials, build showcases, and server highlights/p> div classsocial-features> span classfeature-tag>i classfas fa-play-circle>/i> Videos/span> span classfeature-tag>i classfas fa-graduation-cap>/i> Tutorials/span> span classfeature-tag>i classfas fa-trophy>/i> Highlights/span> /div> /div> div classsocial-hover-effect>/div> a href# classsocial-link target_blank>/a> /div> div classsocial-card advanced-social data-platformtiktok> div classsocial-visual> div classsocial-icon-large tiktok-bg> i classfab fa-tiktok>/i> /div> div classsocial-glow>/div> div classsocial-stats> span classmember-count>0/span> span classmember-label>Followers/span> /div> /div> div classsocial-content> h4>TikTok/h4> p>Short clips, funny moments, and quick server updates/p> div classsocial-features> span classfeature-tag>i classfas fa-music>/i> Clips/span> span classfeature-tag>i classfas fa-laugh>/i> Fun/span> span classfeature-tag>i classfas fa-bolt>/i> Quick/span> /div> /div> div classsocial-hover-effect>/div> a href# classsocial-link target_blank>/a> /div> /div> /div> /section> section classevent-showcase idevent-showcase styledisplay: none;> div classevent-container> div classevent-header> div classevent-badge> i classfas fa-calendar-star>/i> span idevent-badge-text>UPCOMING EVENT/span> /div> h2 idevent-title>Loading.../h2> p classevent-subtitle idevent-subtitle>Loading event details.../p> /div> div classevent-main> div classevent-visual> div classevent-image> img idevent-image srccdn/images/mcbg.jpg altEvent> div classevent-overlay>/div> div classevent-particles idevent-particles>/div> /div> div classevent-stats> div classstat-item> div classstat-icon> i classfas fa-trophy>/i> /div> div classstat-info> span classstat-number idevent-prize-pool>$0/span> span classstat-label>Prize Pool/span> /div> /div> div classstat-item> div classstat-icon> i classfas fa-users>/i> /div> div classstat-info> span classstat-number idevent-participants>0+/span> span classstat-label>Participants/span> /div> /div> div classstat-item> div classstat-icon> i classfas fa-clock>/i> /div> div classstat-info> span classstat-number idevent-duration>24h/span> span classstat-label>Duration/span> /div> /div> /div> /div> div classevent-details> div classevent-description> h3>Event Overview/h3> p idevent-description>Loading event description.../p> div classevent-features> div classfeature> i classfas fa-cube>/i> span>Custom Game Modes/span> /div> div classfeature> i classfas fa-gift>/i> span>Exclusive Rewards/span> /div> div classfeature> i classfas fa-trophy>/i> span>Live Leaderboards/span> /div> div classfeature> i classfas fa-users>/i> span>Team Events/span> /div> /div> /div> div classcountdown-advanced> h3>Event Starts In/h3> div idcountdown-advanced classcountdown-units> div classcountdown-unit> div classcountdown-circle> div classcountdown-progress iddays-progress>/div> div classcountdown-number> span iddays-advanced>00/span> /div> /div> span classcountdown-label>Days/span> /div> div classcountdown-unit> div classcountdown-circle> div classcountdown-progress idhours-progress>/div> div classcountdown-number> span idhours-advanced>00/span> /div> /div> span classcountdown-label>Hours/span> /div> div classcountdown-unit> div classcountdown-circle> div classcountdown-progress idminutes-progress>/div> div classcountdown-number> span idminutes-advanced>00/span> /div> /div> span classcountdown-label>Minutes/span> /div> div classcountdown-unit> div classcountdown-circle> div classcountdown-progress idseconds-progress>/div> div classcountdown-number> span idseconds-advanced>00/span> /div> /div> span classcountdown-label>Seconds/span> /div> /div> /div> div classevent-actions> button classevent-btn primary onclickregisterForEvent()> i classfas fa-sign-in-alt>/i> Register Now /button> button classevent-btn secondary onclicklearnMore()> i classfas fa-info-circle>/i> Learn More /button> /div> /div> /div> /div> /section> section classnews> div classnews-container> div classnews-header> div classnews-title-section> h2>i classfas fa-newspaper>/i> Latest News/h2> p>Stay updated with the latest announcements, events, and updates from AvalancheMC/p> /div> div classnews-controls> div classnews-filter> button classfilter-btn active data-filterall>All/button> button classfilter-btn data-filterupdates>Updates/button> button classfilter-btn data-filterevents>Events/button> button classfilter-btn data-filterfeatures>Features/button> /div> div classnews-sort> select idnews-sort> option valuenewest>Newest First/option> option valuepopular>Most Popular/option> option valuetrending>Trending/option> /select> /div> /div> /div> div classnews-stats> div classstat-item> span classstat-number idtotal-news>0/span> span classstat-label>Articles/span> /div> div classstat-item> span classstat-number idtotal-views>0/span> span classstat-label>Total Views/span> /div> div classstat-item> span classstat-number idthis-week>0/span> span classstat-label>This Week/span> /div> /div> div classnews-grid idnews-grid> div classnews-loading> div classloading-spinner>/div> p>Loading latest news.../p> /div> /div> div classnews-actions> button classload-more-btn idload-more-btn> i classfas fa-plus>/i> Load More Articles /button> div classnews-pagination idnews-pagination> !-- Pagination will be generated here --> /div> /div> /div> /section> !-- News Modal --> div idnews-modal classnews-modal> div classnews-modal-overlay>/div> div classnews-modal-content> div classnews-modal-header> button classnews-modal-close idnews-modal-close> i classfas fa-times>/i> /button> /div> div classnews-modal-body idnews-modal-body> !-- News content will be loaded here --> /div> /div> /div> footer> div classfooter-container> div classfooter-main> div classfooter-brand> div classfooter-logo> img srccdn/images/favicon.png altAvalancheMC stylewidth: 32px; height: 32px; margin-right: 12px;> span>AvalancheMC/span> /div> p>The ultimate Minecraft server experience with custom features and epic adventures./p> /div> div classfooter-nav> div classnav-section> h4>Navigation/h4> ul> li>a href#home>Home/a>/li> li>a href#store>Store/a>/li> li>a href#community>Community/a>/li> /ul> /div> div classnav-section> h4>Resources/h4> ul> li>a hrefforums.html>Forums/a>/li> li>a hrefstaff-panel.html>Staff Panel/a>/li> li>a hrefplayer-portal/player-potal.html>Player Portal/a>/li> li>a hrefcheckplayers.html>Check Players/a>/li> /ul> /div> /div> div classfooter-server> h4>Server Status/h4> div classserver-details> p>strong>IP:/strong> play.avalanchemc.net/p> p>strong>Version:/strong> Java 1.20+/p> div classserver-status-footer> span classstatus-dot online>/span> span>Loading.../span> /div> /div> /div> /div> div classfooter-bottom> div classfooter-bottom-content> p>© 2025 AvalancheMC. All rights reserved./p> div classfooter-links> a hrefterms-of-services.html>Terms/a> span>•/span> a hrefcookie-privacy.html>Privacy/a> span>•/span> a hrefcontact.html>Contact/a> /div> p>Not affiliated with Mojang/p> /div> /div> /div> /footer> button classback-to-top idback-to-top>i classfas fa-arrow-up>/i>/button> div idhome-modal classmodal> div classmodal-content> span classclose>×/span> h2 stylecolor: #ff6b6b; margin-bottom: 1rem;>i classfas fa-home stylemargin-right: 0.5rem;>/i>Youre Already Home!/h2> p stylefont-size: 1.1rem; margin-bottom: 1.5rem;>Welcome to the ultimate Minecraft server experience. Youre currently on the homepage where all the adventure begins!/p> div styledisplay: flex; justify-content: center; gap: 2rem; margin: 1rem 0;> div styletext-align: center;> i classfas fa-users stylefont-size: 2rem; color: #4ade80;>/i> p>10+ Players/p> /div> div styletext-align: center;> i classfas fa-cube stylefont-size: 2rem; color: #ff6b6b;>/i> p>Custom Features/p> /div> div styletext-align: center;> i classfas fa-trophy stylefont-size: 2rem; color: #ffa500;>/i> p>Epic Events/p> /div> /div> p stylefont-style: italic; color: #ccc;>Explore the sections below or join our server to start your journey!/p> button classmodal-btn>Got it!/button> /div> /div> div idstore-modal classmodal> div classmodal-content> span classclose>×/span> h2 stylecolor: #ffa500; margin-bottom: 1rem;>i classfas fa-shopping-cart stylemargin-right: 0.5rem;>/i>🛒 Store Coming Soon/h2> p stylefont-size: 1.1rem; margin-bottom: 1.5rem;>Were working hard to bring you an amazing in-game store experience with exclusive cosmetics, ranks, and boosts!/p> div styledisplay: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0;> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; text-align: center;> i classfas fa-crown stylefont-size: 2rem; color: #ffd700; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>VIP Ranks/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Exclusive perks and commands/p> /div> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; text-align: center;> i classfas fa-palette stylefont-size: 2rem; color: #ff6b6b; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Cosmetics/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Unique skins and effects/p> /div> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; text-align: center;> i classfas fa-coins stylefont-size: 2rem; color: #4ade80; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Cubit Shop/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>In-game currency purchases/p> /div> /div> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; margin: 1rem 0; text-align: center;> h3 stylecolor: #ff6b6b; margin-top: 0;>Expected Launch/h3> p stylefont-size: 1.2rem; color: #ffa500; margin: 0;>Q1 2026/p> /div> p stylefont-style: italic; color: #ccc;>Follow our social media for updates and early access!/p> button classmodal-btn>Stay Tuned/button> /div> /div> div idcommunity-modal classmodal> div classmodal-content> span classclose>×/span> h2 stylecolor: #1e40af; margin-bottom: 1rem;>i classfas fa-users stylemargin-right: 0.5rem;>/i>👥 Community Hub/h2> p stylefont-size: 1.1rem; margin-bottom: 1.5rem;>Our comprehensive community features are under development! Join us in building the ultimate Minecraft community./p> div styledisplay: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0;> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; text-align: center;> i classfas fa-comments stylefont-size: 2rem; color: #3b82f6; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Forums/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Discussion boards and support/p> /div> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; text-align: center;> i classfas fa-users stylefont-size: 2rem; color: #8b5cf6; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Social Feed/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Share builds and screenshots/p> /div> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; text-align: center;> i classfas fa-calendar stylefont-size: 2rem; color: #f59e0b; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Events/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Community events and tournaments/p> /div> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; text-align: center;> i classfas fa-user-friends stylefont-size: 2rem; color: #10b981; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Friends List/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Connect with other players/p> /div> /div> div stylebackground: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; margin: 1rem 0; text-align: center;> h3 stylecolor: #ff6b6b; margin-top: 0;>Coming Soon/h3> p stylefont-size: 1.1rem; color: #4ade80; margin: 0;>Full community integration/p> /div> p stylefont-style: italic; color: #ccc;>For now, join our Discord for the best community experience!/p> button classmodal-btn onclickwindow.open(https://discord.gg/avalanchemc, _blank) stylebackground: linear-gradient(45deg, #5865f2, #7289da);> i classfab fa-discord stylemargin-right: 0.5rem;>/i>Join Discord /button> /div> /div> div idwindows-download-modal classmodal> div classmodal-content stylemax-width: 800px; max-height: 90vh; overflow-y: auto;> span classclose>×/span> h2 stylecolor: #0078D4; margin-bottom: 1rem;>i classfab fa-windows stylemargin-right: 0.5rem;>/i>🚀 Windows Download Center/h2> !-- Latest Release Section --> div stylebackground: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 15px; margin-bottom: 2rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);> div styledisplay: flex; align-items: center; margin-bottom: 1rem;> i classfas fa-star stylefont-size: 1.5rem; color: #ffd700; margin-right: 0.5rem;>/i> h3 stylemargin: 0; color: #4ade80;>Latest Release/h3> span stylemargin-left: auto; background: #4ade80; color: black; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold;>LATEST/span> /div> h4 stylecolor: white; margin: 0.5rem 0;>AvalancheMC App v0.0.1/h4> p stylecolor: #ccc; margin: 0.5rem 0; line-height: 1.6;>First release, brings tons of features and much more!/p> div styledisplay: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0;> div styletext-align: center;> i classfas fa-code-branch stylecolor: #ff6b6b;>/i> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Version/p> strong stylecolor: white;>0.0.1/strong> /div> div styletext-align: center;> i classfas fa-calendar stylecolor: #ffa500;>/i> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Published/p> strong stylecolor: white;>Dec 12, 2025/strong> /div> div styletext-align: center;> i classfas fa-shield-alt stylecolor: #4ade80;>/i> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Status/p> strong stylecolor: #ffbb00;>BETA/strong> /div> div styletext-align: center;> i classfas fa-download stylecolor: #0078D4;>/i> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Downloads/p> strong stylecolor: white;>0/strong> /div> /div> /div> !-- Change Logs Section --> div stylebackground: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 15px; margin-bottom: 2rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);> h3 stylecolor: #ff6b6b; margin-bottom: 1rem;>i classfas fa-list stylemargin-right: 0.5rem;>/i>Recent Change Logs/h3> div stylemax-height: 200px; overflow-y: auto;> div stylemargin-bottom: 1rem; padding: 1rem; background: rgba(0,0,0,0.3); border-radius: 10px;> h5 stylemargin: 0; color: white;>v2.1.0 - December 6, 2025/h5> ul stylemargin: 0.5rem 0 0 0; padding-left: 1.5rem; color: #ccc;> li>Added new dark theme options/li> li>Improved server connection stability/li> li>Fixed memory leak in background processes/li> li>Enhanced UI responsiveness/li> /ul> /div> div stylemargin-bottom: 1rem; padding: 1rem; background: rgba(0,0,0,0.3); border-radius: 10px;> h5 stylemargin: 0; color: white;>v2.0.5 - November 28, 2025/h5> ul stylemargin: 0.5rem 0 0 0; padding-left: 1.5rem; color: #ccc;> li>Security updates and patches/li> li>Performance optimizations/li> li>Bug fixes for launcher crashes/li> /ul> /div> /div> /div> !-- Download Options Section --> div stylebackground: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 15px; margin-bottom: 2rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);> h3 stylecolor: #0078D4; margin-bottom: 1rem;>i classfas fa-cogs stylemargin-right: 0.5rem;>/i>Download Options/h3> div styledisplay: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;> div classdownload-option stylebackground: rgba(0,0,0,0.3); padding: 1rem; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; onclickselectDownloadOption(exe)> i classfas fa-file-code stylefont-size: 2rem; color: #0078D4; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Installer (.exe)/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>Recommended for most users/p> small stylecolor: #888;>Size: ... MB/small> /div> div classdownload-option stylebackground: rgba(0,0,0,0.3); padding: 1rem; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; onclickselectDownloadOption(msi)> i classfas fa-archive stylefont-size: 2rem; color: #28a745; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>MSI Package/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>For enterprise deployment/p> small stylecolor: #888;>Size: ... MB/small> /div> div classdownload-option stylebackground: rgba(0,0,0,0.3); padding: 1rem; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; onclickselectDownloadOption(zip)> i classfas fa-file-archive stylefont-size: 2rem; color: #ffa500; margin-bottom: 0.5rem;>/i> h4 stylemargin: 0; color: white;>Portable (.zip)/h4> p stylemargin: 0.5rem 0 0 0; color: #ccc; font-size: 0.9rem;>No installation required/p> small stylecolor: #888;>Size: ... MB/small> /div> /div> /div> !-- Download Button --> div styletext-align: center;> button idadvanced-download-btn classmodal-btn stylebackground: linear-gradient(45deg, #0078D4, #005a9e); padding: 1.2rem 3rem; font-size: 1.1rem; position: relative; overflow: hidden; onclickstartDownload()> i classfas fa-download stylemargin-right: 0.5rem;>/i>Download Latest Version div iddownload-progress styleposition: absolute; bottom: 0; left: 0; height: 4px; background: #4ade80; width: 0%; transition: width 0.3s ease;>/div> /button> p stylemargin: 1rem 0 0 0; color: #ccc; font-size: 0.9rem;>By downloading, you agree to our a href# stylecolor: #0078D4;>Terms of Service/a>/p> /div> /div> /div> script> // Firebase Configuration const firebaseConfig { apiKey: AIzaSyCKAVq4va8Xml9yLiX-nXUnlqIJ_MteUKI, authDomain: avalanchemc-new.firebaseapp.com, projectId: avalanchemc-new, storageBucket: avalanchemc-new.firebasestorage.app, messagingSenderId: 479999982846, appId: 1:479999982846:web:396d9fe126b6877aa039af, measurementId: G-YP9JR6YSEL }; // Initialize Firebase firebase.initializeApp(firebaseConfig); const db firebase.firestore(); // Content Loading Class class ContentLoader { constructor() { this.db firebase.firestore(); } // Load hero content async loadHeroContent() { try { const doc await this.db.collection(content).doc(hero).get(); if (doc.exists) { const data doc.data(); const heroTitle document.querySelector(h1); const heroSubtitle document.querySelector(h2); const heroDesc document.querySelector(.hero p); if (heroTitle && data.title) heroTitle.textContent data.title; if (heroSubtitle && data.subtitle) heroSubtitle.textContent data.subtitle; if (heroDesc && data.description) heroDesc.textContent data.description; // Update hero stats const maxOnlineEl document.getElementById(max-online); const currentOnlineEl document.getElementById(current-online); const serverStatusEl document.getElementById(server-status); if (maxOnlineEl && data.maxOnline) maxOnlineEl.textContent data.maxOnline; if (currentOnlineEl && data.currentOnline) currentOnlineEl.textContent data.currentOnline; if (serverStatusEl && data.serverStatus) { serverStatusEl.textContent data.serverStatus; serverStatusEl.style.color data.serverStatus Online ? #4ade80 : #ef4444; } // Update hero features if (data.features && data.features.length > 0) { const featureElements document.querySelectorAll(.hero-feature); data.features.forEach((feature, index) > { if (featureElementsindex) { const iconEl featureElementsindex.querySelector(i); const spanEl featureElementsindex.querySelector(span); if (iconEl && feature.icon) iconEl.className feature.icon; if (spanEl && feature.text) spanEl.textContent feature.text; } }); } } } catch (error) { console.error(Error loading hero content:, error); } } // Load features content async loadFeaturesContent() { try { const doc await this.db.collection(content).doc(features).get(); if (doc.exists) { const data doc.data(); const featuresTitle document.querySelector(#store h2); if (featuresTitle && data.title) featuresTitle.textContent data.title; // Update feature cards if (data.cards && data.cards.length > 0) { const cardElements document.querySelectorAll(.feature-card); data.cards.forEach((card, index) > { if (cardElementsindex) { const iconEl cardElementsindex.querySelector(i); const titleEl cardElementsindex.querySelector(h3); const descEl cardElementsindex.querySelector(p); if (iconEl && card.icon) iconEl.className card.icon; if (titleEl && card.title) titleEl.textContent card.title; if (descEl && card.description) descEl.textContent card.description; } }); } } } catch (error) { console.error(Error loading features content:, error); } } // Load stats content async loadStatsContent() { try { const doc await this.db.collection(content).doc(stats).get(); if (doc.exists) { const data doc.data(); const statElements document.querySelectorAll(.stats .stat h3); if (statElements0 && data.activePlayers) { statElements0.textContent data.activePlayers.toLocaleString(); } if (statElements1 && data.uniqueBuilds) { statElements1.textContent data.uniqueBuilds.toLocaleString(); } if (statElements2 && data.uptime) { statElements2.textContent data.uptime; } } } catch (error) { console.error(Error loading stats content:, error); } } // Load mobile content async loadMobileContent() { try { const doc await this.db.collection(content).doc(mobile).get(); if (doc.exists) { const data doc.data(); const mobileTitle document.querySelector(.mobile-app h2); const mobileDesc document.querySelector(.mobile-app p); if (mobileTitle && data.title) mobileTitle.textContent data.title; if (mobileDesc && data.description) mobileDesc.textContent data.description; // Update mobile features if (data.features && data.features.length > 0) { const featureElements document.querySelectorAll(.app-text li); data.features.forEach((feature, index) > { if (featureElementsindex) { const iconEl featureElementsindex.querySelector(i); const textEl featureElementsindex.childNodes1; if (iconEl && feature.icon) iconEl.className feature.icon; if (textEl && feature.text) textEl.textContent feature.text; } }); } } } catch (error) { console.error(Error loading mobile content:, error); } } // Load countdown content async loadCountdownContent() { try { const doc await this.db.collection(content).doc(countdown).get(); if (doc.exists) { const data doc.data(); const countdownTitle document.querySelector(.countdown-section h2); const countdownEvent document.querySelector(.countdown-section p); if (countdownTitle && data.title) countdownTitle.textContent data.title; if (countdownEvent && data.eventName) countdownEvent.textContent `Dont miss the ${data.eventName}!`; // Update countdown date if (data.eventDate) { window.eventDate new Date(data.eventDate).getTime(); } } } catch (error) { console.error(Error loading countdown content:, error); } } // Load social content async loadSocialContent() { try { const doc await this.db.collection(content).doc(social).get(); if (doc.exists) { const data doc.data(); const socialTitle document.querySelector(#community h2); if (socialTitle && data.title) socialTitle.textContent data.title; // Update Discord member count const discordMembers document.querySelector(.social-carddata-platformdiscord .member-count); if (discordMembers && data.discordMembers) { discordMembers.textContent data.discordMembers; } } } catch (error) { console.error(Error loading social content:, error); } } // Load footer content async loadFooterContent() { try { const doc await this.db.collection(content).doc(footer).get(); if (doc.exists) { const data doc.data(); const footerAbout document.querySelector(.footer-section p); const footerCopyright document.querySelector(.footer-bottom p:first-child); const footerTagline document.querySelector(.footer-bottom p:last-child); if (footerAbout && data.about) footerAbout.textContent data.about; if (footerCopyright && data.copyright) footerCopyright.textContent data.copyright; if (footerTagline && data.tagline) footerTagline.innerHTML data.tagline; // Update server info in footer const footerServerIp document.querySelector(.footer-section p strong); const footerServerVersion document.querySelector(.footer-section p:nth-child(2)); if (footerServerIp && data.serverIp) footerServerIp.nextSibling.textContent data.serverIp; if (footerServerVersion && data.serverVersion) footerServerVersion.innerHTML `strong>Version:/strong> ${data.serverVersion}`; } } catch (error) { console.error(Error loading footer content:, error); } } // Load homepage content (legacy) async loadHomepageContent() { try { const doc await this.db.collection(content).doc(homepage).get(); if (doc.exists) { const data doc.data(); // Update hero content if elements exist const heroTitle document.querySelector(h1); const heroSubtitle document.querySelector(h2); const heroDesc document.querySelector(.hero p); if (heroTitle && data.heroTitle) heroTitle.textContent data.heroTitle; if (heroSubtitle && data.heroSubtitle) heroSubtitle.textContent data.heroSubtitle; if (heroDesc && data.heroDescription) heroDesc.textContent data.heroDescription; // Update event start time for countdown if (data.eventStartTime) { // Update the countdown to use the new date this.updateEventCountdown(data.eventStartTime); } } } catch (error) { console.error(Error loading homepage content:, error); } } // Load event content async loadEventContent() { try { const doc await this.db.collection(content).doc(event).get(); if (doc.exists) { const data doc.data(); const eventSection document.getElementById(event-showcase); // Update event content document.getElementById(event-title).textContent data.title || Event Loading...; document.getElementById(event-subtitle).textContent data.category || Loading...; document.getElementById(event-description).textContent data.description || Loading event description...; document.getElementById(event-prize-pool).textContent data.prizePool ? `$${data.prizePool}` : $0; document.getElementById(event-participants).textContent data.participants ? `${data.participants}+` : 0+; if (data.startDate) { this.updateEventCountdown(data.startDate); } // Show the event section if (eventSection) { eventSection.style.display block; } } else { // Hide event section if no event data document.getElementById(event-showcase).style.display none; } } catch (error) { console.error(Error loading event content:, error); document.getElementById(event-showcase).style.display none; } } // Update event countdown updateEventCountdown(eventDateString) { const eventDate new Date(eventDateString).getTime(); const now new Date().getTime(); // Update the global event date and total duration for countdown window.eventDate eventDate; totalDuration eventDate - now; } // Load news content async loadNewsContent() { try { const snapshot await this.db.collection(news) .orderBy(createdAt, desc) .limit(6) .get(); const newsGrid document.getElementById(news-grid); const totalNews document.getElementById(total-news); const totalViews document.getElementById(total-views); const thisWeek document.getElementById(this-week); if (snapshot.empty) { newsGrid.innerHTML div classno-news>p>No news articles available yet./p>/div>; return; } let totalViewsCount 0; let thisWeekCount 0; const weekAgo new Date(); weekAgo.setDate(weekAgo.getDate() - 7); const newsCards snapshot.docs.map(doc > { const news { id: doc.id, ...doc.data() }; totalViewsCount + news.views || 0; const newsDate news.createdAt ? news.createdAt.toDate() : new Date(); if (newsDate > weekAgo) { thisWeekCount++; } return this.createNewsCard(news); }); newsGrid.innerHTML newsCards.join(); // Update stats totalNews.textContent snapshot.size; totalViews.textContent totalViewsCount.toLocaleString(); thisWeek.textContent thisWeekCount; } catch (error) { console.error(Error loading news content:, error); document.getElementById(news-grid).innerHTML div classerror>p>Failed to load news. Please try again later./p>/div>; } } createNewsCard(news) { const date news.createdAt ? news.createdAt.toDate() : new Date(); const formattedDate date.toLocaleDateString(en-US, { month: short, day: numeric, year: numeric }); return ` div classnews-card data-id${news.id}> div classnews-card-image> img src${news.image || cdn/images/mcbg.jpg} alt${news.title} onerrorthis.srccdn/images/mcbg.jpg> div classnews-card-overlay>/div> span classnews-card-category>${news.category || news}/span> /div> div classnews-card-content> div classnews-card-meta> span classnews-card-date>${formattedDate}/span> div classnews-card-author> img src${news.authorAvatar || cdn/images/favicon.png} alt${news.author || Staff} onerrorthis.srccdn/images/favicon.png> span>${news.author || Staff}/span> /div> /div> h3 classnews-card-title>${news.title}/h3> p classnews-card-excerpt>${news.excerpt}/p> div classnews-card-footer> div classnews-card-stats> span>i classfas fa-eye>/i> ${news.views || 0}/span> span>i classfas fa-heart>/i> ${news.likes || 0}/span> /div> div classnews-card-actions> button classnews-card-btn primary onclickreadMore(${news.id})> Read More /button> /div> /div> /div> /div> `; } // Load community content async loadCommunityContent() { try { const doc await this.db.collection(content).doc(community).get(); if (doc.exists) { const data doc.data(); // Update Discord member count const discordStats document.querySelector(.social-carddata-platformdiscord .member-count); if (discordStats && data.discordMembers) { discordStats.textContent data.discordMembers; } } } catch (error) { console.error(Error loading community content:, error); } } // Load server content async loadServerContent() { try { const doc await this.db.collection(content).doc(server).get(); if (doc.exists) { const data doc.data(); // Update footer server info if needed const footerServer document.querySelector(.footer-server); if (footerServer && data.ip) { // Could update footer server info here if needed } } } catch (error) { console.error(Error loading server content:, error); } } // Load settings async loadSettings() { try { const doc await this.db.collection(settings).doc(site).get(); if (doc.exists) { const data doc.data(); // Handle maintenance mode if (data.maintenanceMode) { // Could show maintenance message console.log(Site is in maintenance mode); } // Update page title if provided if (data.siteTitle) { document.title data.siteTitle; } } } catch (error) { console.error(Error loading settings:, error); } } } // Initialize content loader const contentLoader new ContentLoader(); // Theme toggle const themeToggle document.getElementById(theme-toggle); themeToggle.addEventListener(click, () > { document.body.classList.toggle(dark-mode); themeToggle.innerHTML document.body.classList.contains(dark-mode) ? i classfas fa-sun>/i> : i classfas fa-moon>/i>; }); // Admin button document.getElementById(admin-btn).addEventListener(click, () > { window.location.href login.html; }); // User dropdown toggle document.querySelector(.user-profile).addEventListener(click, (e) > { e.stopPropagation(); const dropdown document.querySelector(.user-dropdown); dropdown.classList.toggle(show); }); // Close dropdown when clicking outside document.addEventListener(click, () > { document.querySelector(.user-dropdown).classList.remove(show); }); // Advanced Event Countdown with Progress Circles let eventDate new Date(2025-12-25T00:00:00).getTime(); // Default fallback let totalDuration eventDate - new Date(2025-12-07T00:00:00).getTime(); // Total time from start to event function updateAdvancedCountdown() { // Use dynamic event date if available const currentEventDate window.eventDate || eventDate; const now new Date().getTime(); const distance currentEventDate - now; if (distance 0) { clearInterval(advancedCountdownInterval); document.getElementById(countdown-advanced).innerHTML div stylegrid-column: span 4; text-align: center; color: #4ade80; font-size: 1.5rem; font-weight: bold;>🎉 Event Started! 🎉/div>; return; } const days Math.floor(distance / (1000 * 60 * 60 * 24)); const hours Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds Math.floor((distance % (1000 * 60)) / 1000); // Update numbers document.getElementById(days-advanced).textContent days.toString().padStart(2, 0); document.getElementById(hours-advanced).textContent hours.toString().padStart(2, 0); document.getElementById(minutes-advanced).textContent minutes.toString().padStart(2, 0); document.getElementById(seconds-advanced).textContent seconds.toString().padStart(2, 0); // Update progress circles const elapsed totalDuration - distance; const progress Math.min((elapsed / totalDuration) * 360, 360); document.getElementById(days-progress).style.background `conic-gradient(#ff6b6b ${progress}deg, transparent 0deg)`; document.getElementById(hours-progress).style.background `conic-gradient(#ffa500 ${(progress * 24) % 360}deg, transparent 0deg)`; document.getElementById(minutes-progress).style.background `conic-gradient(#4ade80 ${(progress * 1440) % 360}deg, transparent 0deg)`; document.getElementById(seconds-progress).style.background `conic-gradient(#3b82f6 ${(progress * 86400) % 360}deg, transparent 0deg)`; } const advancedCountdownInterval setInterval(updateAdvancedCountdown, 1000); updateAdvancedCountdown(); // Event particle effects function createEventParticles() { const particlesContainer document.getElementById(event-particles); if (!particlesContainer) return; for (let i 0; i 20; i++) { const particle document.createElement(div); particle.className event-particle; particle.style.left Math.random() * 100 + %; particle.style.top Math.random() * 100 + %; particle.style.animationDelay Math.random() * 8 + s; particle.style.animationDuration (Math.random() * 4 + 6) + s; particlesContainer.appendChild(particle); } } // Event interaction functions function registerForEvent() { // Simulate registration process const btn event.target.closest(.event-btn); if (btn) { btn.innerHTML i classfas fa-spinner fa-spin>/i> Registering...; btn.disabled true; setTimeout(() > { btn.innerHTML i classfas fa-check>/i> Registered!; btn.style.background linear-gradient(45deg, #4ade80, #22c55e); setTimeout(() > { btn.innerHTML i classfas fa-sign-in-alt>/i> Register Now; btn.disabled false; btn.style.background ; }, 3000); }, 2000); } } function learnMore() { // Scroll to features section or open modal const featuresSection document.querySelector(.features); if (featuresSection) { featuresSection.scrollIntoView({ behavior: smooth, block: start }); } } // Initialize content and particles on load document.addEventListener(DOMContentLoaded, async () > { createEventParticles(); // Load all dynamic content from Firestore await Promise.all( contentLoader.loadHeroContent(), contentLoader.loadFeaturesContent(), contentLoader.loadStatsContent(), contentLoader.loadEventContent(), contentLoader.loadMobileContent(), contentLoader.loadCountdownContent(), contentLoader.loadNewsContent(), contentLoader.loadSocialContent(), contentLoader.loadFooterContent(), contentLoader.loadSettings() ); }); // Spoiler buttons document.querySelectorAll(.spoiler-btn).forEach(btn > { btn.addEventListener(click, () > { const target document.getElementById(btn.dataset.target); target.style.display target.style.display none || target.style.display ? block : none; }); }); // Enhanced News Section Functionality class NewsManager { constructor() { this.newsData { id: 1, title: Website Major Redesign & New Features, excerpt: Complete website overhaul with modern footer design, advanced event countdown, and improved user experience, image: cdn/images/mcbg.jpg, author: Kilo Code, authorAvatar: cdn/images/favicon.png, date: 2025-12-7, category: updates, views: 0, likes: 0, liked: false, tags: website, redesign, features, ui }, { id: 2, title: Santa Claus, excerpt: Santa will roam the server, every few moments, dropping gifts, can spawn at your place too, image: cdn/images/santaclaus.png, author: ChrisTheSanta, authorAvatar: cdn/images/chris.png, date: 2025-12-7, category: events, views: 0, likes: 0, liked: false, tags: winter, rewards, xmas }, { id: 2, title: Server Region Changes, excerpt: Server location is changed to france, will reduce lag for players from USA, image: cdn/images/matrixbg.jpg, author: ChrisTheSanta, authorAvatar: cdn/images/chris.png, date: 2025-12-7, category: updates, views: 0, likes: 0, liked: false, tags: performance }, { id: 3, title: Winter Wonderland Event, excerpt: Snow is falling in AvalancheMC! Join our winter event with special snow biomes, holiday cosmetics, and festive rewards., image: cdn/images/mcbg.jpg, author: Event Team, authorAvatar: cdn/images/favicon.png, date: 2025-12-08, category: events, views: 987, likes: 234, liked: false, tags: winter, event, cosmetics }, { id: 4, title: Custom Game Modes Beta, excerpt: Try our new custom game modes in beta! Vote for your favorites and help shape the future of AvalancheMC gameplay., image: cdn/images/mcbg.jpg, author: Game Design, authorAvatar: cdn/images/favicon.png, date: 2025-12-05, category: features, views: 1876, likes: 312, liked: false, tags: beta, game-modes, voting }, { id: 5, title: Server Performance Optimization, excerpt: Major performance improvements deployed! Experience faster load times, smoother gameplay, and reduced lag across all game modes., image: cdn/images/mcbg.jpg, author: Tech Team, authorAvatar: cdn/images/favicon.png, date: 2025-12-03, category: updates, views: 3421, likes: 445, liked: false, tags: performance, optimization, lag }, { id: 6, title: Community Spotlight: Builder of the Month, excerpt: Congratulations to our Builder of the Month! Check out these amazing builds and get inspired for your next creation., image: cdn/images/mcbg.jpg, author: Community Team, authorAvatar: cdn/images/favicon.png, date: 2025-12-01, category: features, views: 756, likes: 178, liked: false, tags: community, builds, spotlight } ; this.filteredNews ...this.newsData; this.currentPage 1; this.itemsPerPage 6; this.currentFilter all; this.currentSort newest; this.init(); } init() { this.renderNews(); this.setupEventListeners(); this.updateStats(); this.animateCards(); } setupEventListeners() { // Filter buttons document.querySelectorAll(.filter-btn).forEach(btn > { btn.addEventListener(click, (e) > { document.querySelectorAll(.filter-btn).forEach(b > b.classList.remove(active)); e.target.classList.add(active); this.currentFilter e.target.dataset.filter; this.filterNews(); }); }); // Sort select document.getElementById(news-sort).addEventListener(change, (e) > { this.currentSort e.target.value; this.sortNews(); }); // Load more button document.getElementById(load-more-btn).addEventListener(click, () > { this.loadMore(); }); } filterNews() { if (this.currentFilter all) { this.filteredNews ...this.newsData; } else { this.filteredNews this.newsData.filter(item > item.category this.currentFilter); } this.sortNews(); } sortNews() { this.filteredNews.sort((a, b) > { switch (this.currentSort) { case newest: return new Date(b.date) - new Date(a.date); case popular: return b.likes - a.likes; case trending: return b.views - a.views; default: return 0; } }); this.currentPage 1; this.renderNews(); } renderNews() { const grid document.getElementById(news-grid); const startIndex 0; const endIndex this.currentPage * this.itemsPerPage; const newsToShow this.filteredNews.slice(startIndex, endIndex); grid.innerHTML newsToShow.map(news > this.createNewsCard(news)).join(); // Update load more button const loadMoreBtn document.getElementById(load-more-btn); if (endIndex > this.filteredNews.length) { loadMoreBtn.style.display none; } else { loadMoreBtn.style.display flex; } // Animate new cards setTimeout(() > this.animateCards(), 100); } createNewsCard(news) { const date new Date(news.date); const formattedDate date.toLocaleDateString(en-US, { month: short, day: numeric, year: numeric }); return ` div classnews-card data-id${news.id}> div classnews-card-image> img src${news.image} alt${news.title}> div classnews-card-overlay>/div> span classnews-card-category>${news.category}/span> /div> div classnews-card-content> div classnews-card-meta> span classnews-card-date>${formattedDate}/span> div classnews-card-author> img src${news.authorAvatar} alt${news.author}> span>${news.author}/span> /div> /div> h3 classnews-card-title>${news.title}/h3> p classnews-card-excerpt>${news.excerpt}/p> div classnews-card-footer> div classnews-card-stats> span>i classfas fa-eye>/i> ${news.views.toLocaleString()}/span> span classheart-btn onclicktoggleLike(${news.id}, event)> i classfas fa-heart ${news.liked ? liked : }>/i> ${news.likes} /span> /div> div classnews-card-actions> button classnews-card-btn onclickshareNews(${news.id})> i classfas fa-share>/i> /button> button classnews-card-btn primary onclickreadMore(${news.id})> Read More /button> /div> /div> /div> /div> `; } loadMore() { const loadMoreBtn document.getElementById(load-more-btn); loadMoreBtn.classList.add(loading); loadMoreBtn.innerHTML i classfas fa-spinner>/i> Loading...; setTimeout(() > { this.currentPage++; this.renderNews(); loadMoreBtn.classList.remove(loading); }, 1500); } updateStats() { const totalNews this.newsData.length; const totalViews this.newsData.reduce((sum, news) > sum + news.views, 0); const thisWeek this.newsData.filter(news > { const newsDate new Date(news.date); const weekAgo new Date(); weekAgo.setDate(weekAgo.getDate() - 7); return newsDate > weekAgo; }).length; document.getElementById(total-news).textContent totalNews; document.getElementById(total-views).textContent totalViews.toLocaleString(); document.getElementById(this-week).textContent thisWeek; } animateCards() { const cards document.querySelectorAll(.news-card); cards.forEach((card, index) > { setTimeout(() > { card.classList.add(loaded); }, index * 150); }); } } // Global functions for card actions function shareNews(newsId) { // Simple share functionality if (navigator.share) { navigator.share({ title: AvalancheMC News, text: Check out this latest news from AvalancheMC!, url: window.location.href }); } else { // Fallback: copy to clipboard navigator.clipboard.writeText(window.location.href).then(() > { alert(Link copied to clipboard!); }); } } function readMore(newsId) { // Find the news item and increment view count const newsItem window.newsManager.newsData.find(item > item.id newsId); if (newsItem) { // Increment view count newsItem.views++; window.newsManager.updateStats(); // Update the UI window.newsManager.renderNews(); // Open modal openNewsModal(newsItem); } } function toggleLike(newsId, event) { event.stopPropagation(); // Prevent triggering readMore const newsItem window.newsManager.newsData.find(item > item.id newsId); if (newsItem) { // Toggle like status newsItem.liked !newsItem.liked; // Update like count if (newsItem.liked) { newsItem.likes++; } else { newsItem.likes Math.max(0, newsItem.likes - 1); } // Update the UI window.newsManager.renderNews(); // Update modal if its open const modalLikes document.getElementById(`modal-likes-${newsId}`); const modalHeart document.querySelector(`#news-modal .heart-btn .fa-heart`); if (modalLikes && modalHeart) { modalLikes.textContent newsItem.likes; if (newsItem.liked) { modalHeart.classList.add(liked); } else { modalHeart.classList.remove(liked); } } // Add visual feedback const heartIcon event.currentTarget.querySelector(.fa-heart); heartIcon.style.animation heartPulse 0.6s ease; setTimeout(() > { heartIcon.style.animation ; }, 600); } } // Modal functionality function openNewsModal(newsItem) { const modal document.getElementById(news-modal); const modalBody document.getElementById(news-modal-body); // Generate full article content const fullContent generateFullArticle(newsItem); modalBody.innerHTML fullContent; // Update view count in modal const modalViews document.getElementById(`modal-views-${newsItem.id}`); if (modalViews) { modalViews.textContent newsItem.views.toLocaleString(); } // Show modal modal.classList.add(active); document.body.style.overflow hidden; // Add close functionality document.getElementById(news-modal-close).onclick closeNewsModal; modal.onclick (e) > { if (e.target modal || e.target.classList.contains(news-modal-overlay)) { closeNewsModal(); } }; // Close on escape key document.addEventListener(keydown, handleEscapeKey); } function closeNewsModal() { const modal document.getElementById(news-modal); modal.classList.remove(active); document.body.style.overflow ; document.removeEventListener(keydown, handleEscapeKey); } function handleEscapeKey(e) { if (e.key Escape) { closeNewsModal(); } } function generateFullArticle(newsItem) { const date new Date(newsItem.date); const formattedDate date.toLocaleDateString(en-US, { weekday: long, year: numeric, month: long, day: numeric }); // Generate more detailed content based on the news item const fullContent generateDetailedContent(newsItem); return ` div classmodal-news-header> span classmodal-news-category>${newsItem.category}/span> h1 classmodal-news-title>${newsItem.title}/h1> div classmodal-news-meta> div classmodal-news-author> img src${newsItem.authorAvatar} alt${newsItem.author}> div classmodal-news-author-info> span classmodal-news-author-name>${newsItem.author}/span> span classmodal-news-date>${formattedDate}/span> /div> /div> div classmodal-news-stats> span>i classfas fa-eye>/i> span idmodal-views-${newsItem.id}>${newsItem.views.toLocaleString()}/span> views/span> span classheart-btn onclicktoggleLike(${newsItem.id}, event)> i classfas fa-heart ${newsItem.liked ? liked : }>/i> span idmodal-likes-${newsItem.id}>${newsItem.likes}/span> likes /span> /div> /div> /div> img src${newsItem.image} alt${newsItem.title} classmodal-news-image> div classmodal-news-content> ${fullContent} /div> div classmodal-news-tags> ${newsItem.tags.map(tag > `span classmodal-news-tag>#${tag}/span>`).join()} /div> div classmodal-news-actions> button classmodal-news-share onclickshareNews(${newsItem.id})> i classfas fa-share>/i> Share Article /button> /div> `; } function generateDetailedContent(newsItem) { // Generate more detailed content based on the news item type const contentMap { updates: ` p>Weve completely redesigned the AvalancheMC website with modern aesthetics and enhanced functionality!/p> h2>🎨 Footer Redesign/h2> ul> li>Modern horizontal layout with improved visual hierarchy/li> li>Enhanced branding with logo and gradient text effects/li> li>Organized navigation split into Navigation and Resources/li> li>Clean server status integration/li> li>Removed redundant sections for better focus/li> /ul> h2>⏰ Advanced Event Countdown/h2> ul> li>Circular progress bars with animated conic gradients/li> li>Real-time countdown with visual progress indicators/li> li>Event statistics: $500+ prize pool, 50+ participants/li> li>Interactive registration system/li> li>Feature highlights and call-to-action buttons/li> /ul> h2>🚀 Performance & UX Improvements/h2> ul> li>Optimized animations and smooth transitions/li> li>Enhanced mobile responsiveness/li> li>Modern glassmorphism design elements/li> li>Improved accessibility and user experience/li> li>Professional typography and spacing/li> /ul> p>These updates bring AvalancheMCs website to the next level with contemporary design and improved functionality. The new design provides a much more engaging experience for our community!/p> `, events: ` p>Santa will roam the server, every few moments, dropping gifts, can spawn at your place too/p> h2>Event Details/h2> ul> li>strong>Duration:/strong> December 12-27, 2025/li> li>strong>Entry Fee:/strong> Free to join/li> li>strong>Prizes:/strong> Exclusive cosmetics and server currency/li> li>strong>Requirements:/strong> Minecraft Java Edition 1.20+/li> /ul> h2>Rules & Guidelines/h2> p>All participants must follow our server rules. Any violations will result in immediate disqualification. Fair play is essential for an enjoyable experience for everyone./p> p>Dont miss out on this amazing opportunity to showcase your skills and win fantastic prizes!/p> `, updates: ` p>Server location is changed to france, will reduce lag for players from USA/p> h2>Performance Improvements/h2> ul> li>Reduced server lag by 40%/li> li>Faster chunk loading times/li> li>Optimized memory usage/li> li>Improved connection stability/li> /ul> h2>Whats Next/h2> p>This is just the beginning! Were already working on more exciting features and improvements. Stay tuned for future updates./p> `, features: ` p>Discover the latest features weve added to enhance your gameplay experience in AvalancheMC./p> h2>New Features/h2> ul> li>Custom game modes with unique mechanics/li> li>Advanced building tools and utilities/li> li>Community-driven content creation/li> li>Enhanced social features/li> /ul> h2>Community Spotlight/h2> p>This month, were featuring amazing builds and creations from our talented community members. Check out the showcase in our forums!/p> h2>Feedback Welcome/h2> p>We value your input! Let us know what features youd like to see next by visiting our feedback portal./p> ` }; return contentMapnewsItem.category || ` p>${newsItem.excerpt}/p> p>This is a detailed article about ${newsItem.title.toLowerCase()}. In a full implementation, this would contain the complete article content with images, videos, and interactive elements./p> h2>Key Points/h2> ul> li>Important information about the topic/li> li>Additional details and context/li> li>Community impact and benefits/li> /ul> p>Thank you for reading! Stay tuned for more updates from the AvalancheMC team./p> `; } // Initialize news manager when DOM is loaded document.addEventListener(DOMContentLoaded, () > { window.newsManager new NewsManager(); }); // Enhanced scroll animations for news cards window.addEventListener(scroll, () > { document.querySelectorAll(.news-card).forEach(card > { const rect card.getBoundingClientRect(); if (rect.top window.innerHeight - 50) { card.classList.add(loaded); } }); }); // Parallax effect for hero window.addEventListener(scroll, () > { const hero document.querySelector(.hero); const scrollY window.scrollY; hero.style.backgroundPosition `center ${scrollY * 0.5}px`; }); // Fetch server status let maxOnlineInHour 0; let lastUpdateTime Date.now(); async function updateServerStatus() { try { const response await fetch(https://api.mcsrvstat.us/2/play.avalanchemc.net); const data await response.json(); const currentTime Date.now(); // Reset max every hour if (currentTime - lastUpdateTime > 3600000) { // 1 hour maxOnlineInHour 0; lastUpdateTime currentTime; } if (data.online) { const currentOnline data.players.online; if (currentOnline > maxOnlineInHour) { maxOnlineInHour currentOnline; } document.querySelector(.server-status).innerHTML ` span classstatus-dot online>/span> span>Server Online - ${currentOnline} Players/span> `; // Update hero stats document.getElementById(max-online).textContent maxOnlineInHour; document.getElementById(current-online).textContent currentOnline; document.getElementById(server-status).textContent Online; document.getElementById(server-status).style.color #4ade80; } else { document.querySelector(.server-status).innerHTML ` span classstatus-dot offline>/span> span>Server Offline/span> `; // Update hero stats document.getElementById(current-online).textContent 0; document.getElementById(server-status).textContent Offline; document.getElementById(server-status).style.color #ef4444; } } catch (error) { console.error(Failed to fetch server status:, error); document.getElementById(server-status).textContent Error; document.getElementById(server-status).style.color #ffa500; } } updateServerStatus(); setInterval(updateServerStatus, 60000); // Update every minute // Search functionality document.querySelector(.search-bar button).addEventListener(click, () > { const query document.querySelector(.search-bar input).value.toLowerCase(); if (!query) return; // Remove previous highlights document.querySelectorAll(.highlight).forEach(el > { el.classList.remove(highlight); el.innerHTML el.innerHTML.replace(/mark>/g, ).replace(/\/mark>/g, ); }); // Search and highlight const elements document.querySelectorAll(h1, h2, h3, h4, p, li); let firstMatch null; elements.forEach(el > { if (el.textContent.toLowerCase().includes(query)) { el.classList.add(highlight); el.innerHTML el.innerHTML.replace(new RegExp(query, gi), match > `mark>${match}/mark>`); if (!firstMatch) firstMatch el; } }); // Scroll to first match if (firstMatch) { firstMatch.scrollIntoView({ behavior: smooth, block: center }); } }); // Allow enter key in search document.querySelector(.search-bar input).addEventListener(keypress, (e) > { if (e.key Enter) { document.querySelector(.search-bar button).click(); } }); // Modals const homeModal document.getElementById(home-modal); const storeModal document.getElementById(store-modal); const communityModal document.getElementById(community-modal); document.querySelector(ahref#home).addEventListener(click, (e) > { e.preventDefault(); homeModal.style.display block; }); document.querySelector(ahref#store).addEventListener(click, (e) > { e.preventDefault(); storeModal.style.display block; }); document.querySelector(ahref#community).addEventListener(click, (e) > { e.preventDefault(); communityModal.style.display block; }); // Close modal document.querySelectorAll(.close).forEach(close > { close.addEventListener(click, () > { homeModal.style.display none; storeModal.style.display none; communityModal.style.display none; }); }); document.querySelectorAll(.modal-btn).forEach(btn > { btn.addEventListener(click, () > { homeModal.style.display none; storeModal.style.display none; communityModal.style.display none; }); }); window.addEventListener(click, (e) > { if (e.target homeModal || e.target storeModal || e.target communityModal) { homeModal.style.display none; storeModal.style.display none; communityModal.style.display none; } }); // Smooth scrolling for nav links document.querySelectorAll(nav li a:not(href#home):not(href#play):not(href#store):not(href#community)).forEach(link > { link.addEventListener(click, function(e) { e.preventDefault(); const target document.querySelector(this.getAttribute(href)); if (target) { target.scrollIntoView({ behavior: smooth }); } }); }); // Animated counters function animateCounters() { const counters document.querySelectorAll(.animated-counter); counters.forEach(counter > { const target +counter.getAttribute(data-target); const increment target / 100; let current 0; const timer setInterval(() > { current + increment; if (current > target) { counter.textContent target.toLocaleString() + +; clearInterval(timer); } else { counter.textContent Math.floor(current).toLocaleString(); } }, 30); }); } // Animate footer sections on scroll function animateFooter() { const footerSections document.querySelectorAll(.nav-section, .footer-brand, .footer-server); footerSections.forEach((section, index) > { setTimeout(() > { section.style.animation slideInUp 0.8s ease forwards; section.style.opacity 0; section.style.transform translateY(30px); }, index * 150); }); } // Update footer server status async function updateFooterServerStatus() { try { const response await fetch(https://api.mcsrvstat.us/2/play.avalanchemc.net); const data await response.json(); const statusElement document.querySelector(.server-status-footer); if (data.online) { statusElement.innerHTML ` span classstatus-dot online>/span> span>Server Online - ${data.players.online} Players/span> `; } else { statusElement.innerHTML ` span classstatus-dot offline>/span> span>Server Offline/span> `; } } catch (error) { console.error(Failed to fetch footer server status:, error); document.querySelector(.server-status-footer).innerHTML ` span classstatus-dot offline>/span> span>Status Unavailable/span> `; } } // Trigger animations on scroll window.addEventListener(scroll, () > { const statsSection document.querySelector(.stats); const footer document.querySelector(footer); const statsRect statsSection.getBoundingClientRect(); const footerRect footer.getBoundingClientRect(); if (statsRect.top window.innerHeight - 100) { animateCounters(); } if (footerRect.top window.innerHeight - 100) { animateFooter(); } }); // Update footer status on load updateFooterServerStatus(); setInterval(updateFooterServerStatus, 60000); // Update every minute // Automatic growth percentage calculation class GrowthTracker { constructor() { this.storageKey avalanchemc_stats_history; this.currentStats { players: 10, builds: 20, uptime: 99.9 }; this.timeframes { month: 30 * 24 * 60 * 60 * 1000, // 30 days in milliseconds week: 7 * 24 * 60 * 60 * 1000 // 7 days in milliseconds }; this.init(); } init() { this.loadHistory(); this.updateGrowthPercentages(); this.saveCurrentValues(); } loadHistory() { const history localStorage.getItem(this.storageKey); if (history) { this.history JSON.parse(history); } else { // Initialize with default historical data this.history { players: { month: 8, // ~25% growth to reach 10 week: 9 // ~11% growth to reach 10 }, builds: { month: 15, // ~33% growth to reach 20 week: 18 // ~11% growth to reach 20 } }; this.saveHistory(); } } saveHistory() { localStorage.setItem(this.storageKey, JSON.stringify(this.history)); } saveCurrentValues() { // Update historical values with current values for next calculation const now Date.now(); this.history.players.month this.currentStats.players; this.history.builds.month this.currentStats.builds; this.history.lastUpdated now; this.saveHistory(); } calculateGrowth(current, previous) { if (!previous || previous 0) return 0; return Math.round(((current - previous) / previous) * 100); } updateGrowthPercentages() { // Players growth const playersMonthGrowth this.calculateGrowth(this.currentStats.players, this.history.players.month); const playersWeekGrowth this.calculateGrowth(this.currentStats.players, this.history.players.week); // Builds growth const buildsMonthGrowth this.calculateGrowth(this.currentStats.builds, this.history.builds.month); const buildsWeekGrowth this.calculateGrowth(this.currentStats.builds, this.history.builds.week); // Update DOM elements this.updateTrendElement(players, playersMonthGrowth, playersWeekGrowth); this.updateTrendElement(builds, buildsMonthGrowth, buildsWeekGrowth); } updateTrendElement(statType, monthGrowth, weekGrowth) { const trendElement document.querySelector(`.stat-carddata-stat${statType} .stat-trend`); if (trendElement) { const growth statType players ? monthGrowth : weekGrowth; const timeframe statType players ? month : week; const growthText growth > 0 ? `+${growth}% this ${timeframe}` : `${growth}% this ${timeframe}`; trendElement.innerHTML ` i classfas fa-arrow-${growth > 0 ? up : down}>/i> span>${growthText}/span> `; // Update color based on growth trendElement.style.background growth > 0 ? rgba(74, 222, 128, 0.1) : rgba(239, 68, 68, 0.1); trendElement.style.color growth > 0 ? #4ade80 : #ef4444; } } // Method to manually update stats (for admin use) updateStat(statType, newValue) { if (this.currentStats.hasOwnProperty(statType)) { // Store old value in history before updating if (!this.historystatType) this.historystatType {}; this.historystatType.previous this.currentStatsstatType; this.currentStatsstatType newValue; this.updateGrowthPercentages(); this.saveCurrentValues(); } } } // Initialize growth tracker const growthTracker new GrowthTracker(); // Function to update stats programmatically (can be called from console or other scripts) window.updateAvalancheStats function(statType, newValue) { growthTracker.updateStat(statType, newValue); }; // Back-to-top button const backToTopBtn document.getElementById(back-to-top); window.addEventListener(scroll, () > { if (window.pageYOffset > 300) { backToTopBtn.classList.add(show); } else { backToTopBtn.classList.remove(show); } }); backToTopBtn.addEventListener(click, () > { window.scrollTo({ top: 0, behavior: smooth }); }); // Enhanced footer animations const footerObserver new IntersectionObserver((entries) > { entries.forEach(entry > { if (entry.isIntersecting) { entry.target.style.animation slideInUp 0.8s ease forwards; entry.target.style.opacity 1; entry.target.style.transform translateY(0); } }); }, { threshold: 0.1 }); document.querySelectorAll(.nav-section, .footer-brand, .footer-server).forEach(section > { section.style.opacity 0; section.style.transform translateY(30px); footerObserver.observe(section); }); // Social card particle effects function createSocialParticles() { const socialCards document.querySelectorAll(.social-card.advanced-social); socialCards.forEach(card > { const particlesContainer document.createElement(div); particlesContainer.className social-particles; card.appendChild(particlesContainer); for (let i 0; i 8; i++) { const particle document.createElement(div); particle.className social-particle; particle.style.left Math.random() * 100 + %; particle.style.top Math.random() * 100 + %; particle.style.animationDelay Math.random() * 6 + s; particle.style.animationDuration (Math.random() * 2 + 4) + s; particlesContainer.appendChild(particle); } }); } // Initialize social particles when DOM is loaded document.addEventListener(DOMContentLoaded, () > { createSocialParticles(); }); // CTA particle effects function createCTAParticles() { const ctaParticles document.querySelector(.cta-particles); if (!ctaParticles) return; for (let i 0; i 15; i++) { const particle document.createElement(div); particle.className cta-particle; particle.style.left Math.random() * 100 + %; particle.style.top Math.random() * 100 + %; particle.style.animationDelay Math.random() * 8 + s; particle.style.animationDuration (Math.random() * 4 + 6) + s; ctaParticles.appendChild(particle); } } // Tooltip functionality function initializeTooltips() { const badges document.querySelectorAll(.badgedata-tooltip); badges.forEach(badge > { const tooltip document.createElement(div); tooltip.className badge-tooltip; tooltip.textContent badge.dataset.tooltip; document.body.appendChild(tooltip); badge.addEventListener(mouseenter, (e) > { const rect badge.getBoundingClientRect(); tooltip.style.left rect.left + (rect.width / 2) + px; tooltip.style.top rect.top - 40 + px; tooltip.classList.add(show); }); badge.addEventListener(mouseleave, () > { tooltip.classList.remove(show); }); // Add click interaction badge.addEventListener(click, () > { badge.style.animation badgePulse 0.6s ease; setTimeout(() > { badge.style.animation ; }, 600); // Add ripple effect const ripple document.createElement(span); ripple.className badge-ripple; badge.appendChild(ripple); setTimeout(() > ripple.remove(), 600); }); }); } // Particle effect (simple CSS) for (let i 0; i 50; i++) { const particle document.createElement(div); particle.className particle; particle.style.left Math.random() * 100 + %; particle.style.animationDelay Math.random() * 10 + s; document.body.appendChild(particle); } // Windows Download Modal Functions const windowsModal document.getElementById(windows-download-modal); let selectedDownloadOption exe; function openWindowsModal() { windowsModal.style.display block; // Reset selection document.querySelectorAll(.download-option).forEach(opt > opt.classList.remove(selected)); document.querySelector(.download-optiononclick*exe).classList.add(selected); selectedDownloadOption exe; } function selectDownloadOption(option) { document.querySelectorAll(.download-option).forEach(opt > opt.classList.remove(selected)); event.currentTarget.classList.add(selected); selectedDownloadOption option; } function startDownload() { const btn document.getElementById(advanced-download-btn); const progress document.getElementById(download-progress); btn.disabled true; btn.innerHTML i classfas fa-spinner fa-spin stylemargin-right: 0.5rem;>/i>Downloading...; let progressValue 0; const interval setInterval(() > { progressValue + Math.random() * 15; if (progressValue > 100) { progressValue 100; clearInterval(interval); btn.innerHTML i classfas fa-check stylemargin-right: 0.5rem;>/i>Download Complete!; setTimeout(() > { btn.disabled false; btn.innerHTML i classfas fa-download stylemargin-right: 0.5rem;>/i>Download Latest Version; progress.style.width 0%; alert(`Download of ${selectedDownloadOption.toUpperCase()} file started!`); }, 2000); } progress.style.width progressValue + %; }, 200); } // Add windows modal to close handlers document.querySelectorAll(.close).forEach(close > { close.addEventListener(click, () > { windowsModal.style.display none; }); }); window.addEventListener(click, (e) > { if (e.target windowsModal) { windowsModal.style.display none; } }); /script> style> .particle { position: absolute; width: 4px; height: 4px; background: rgba(255, 107, 107, 0.5); border-radius: 50%; pointer-events: none; animation: float 10s infinite linear; top: 100vh; } @keyframes float { to { transform: translateY(-100vh); opacity: 0; } } /style>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]