web/index.html at main · hollowcraftdev/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hollowcraft</title>
    <link rel="stylesheet" href="style.css">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Silkscreen:wght@400;700&display=swap"
      rel="stylesheet">
    <script>
      // Scroll animation observer
      document.addEventListener('DOMContentLoaded', function () {
        const observerOptions = {
          threshold: 0.1,
          rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function (entries) {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add('visible');
            }
          });
        }, observerOptions);

        // Observe all elements with animation classes
        const animatedElements = document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in');
        animatedElements.forEach(el => observer.observe(el));

        // Server status checker
        checkServerStatus();
        // Check every 30 seconds
        setInterval(checkServerStatus, 30000);
      });

      async function checkServerStatus() {
        try {
          const response = await fetch('https://mcapi.us/server/status?ip=play.hollowcraft.org');
          const data = await response.json();

          const statusDot = document.getElementById('server-status-dot');
          const statusText = document.getElementById('server-status-text');
          const playerCounter = document.getElementById('player-counter');
          const maxPlayers = document.getElementById('max-players');

          if (data.status === 'success' && data.online) {
            // Server is online
            statusDot.className = 'status-dot online';
            statusText.textContent = 'Server Online';

            // Animate player count
            const currentCount = parseInt(playerCounter.textContent) || 0;
            const newCount = data.players.now;
            maxPlayers.textContent = data.players.max;

            animatePlayerCount(currentCount, newCount, playerCounter);
          } else {
            // Server is offline
            statusDot.className = 'status-dot offline';
            statusText.textContent = 'Server Offline';
            playerCounter.textContent = '0';
            maxPlayers.textContent = '20';
          }
        } catch (error) {
          // Error fetching data
          console.error('Error checking server status:', error);
          const statusDot = document.getElementById('server-status-dot');
          const statusText = document.getElementById('server-status-text');
          statusDot.className = 'status-dot error';
          statusText.textContent = 'Connection Error';
        }
      }

      function animatePlayerCount(from, to, element) {
        const duration = 1000; // 1 second
        const startTime = performance.now();
        const difference = to - from;

        function update(currentTime) {
          const elapsed = currentTime - startTime;
          const progress = Math.min(elapsed / duration, 1);

          // Easing function for smooth animation
          const easeProgress = 1 - Math.pow(1 - progress, 3);
          const current = Math.round(from + (difference * easeProgress));

          element.textContent = current;

          if (progress < 1) {
            requestAnimationFrame(update);
          }
        }

        requestAnimationFrame(update);
      }
    </script>
  </head>

  <body>
    <img src="banner.png" width="100%">
    <p class="intro">play.hollowcraft.org</p>
    <div class="nav fade-in fade-in-delay-1">
      <a href="#about">About</a> |
      <a href="#screenshots">Screenshots</a>
    </div>
    <div class="social fade-in fade-in-delay-2">
      <a href="https://bsky.app/profile/hollowcraft.org">Bluesky</a> |
      <a href="https://youtube.com/@HollowcraftYT">YouTube</a> |
      <a href="https://discord.gg/Re2qQZH6Px">Discord</a> |
      <a href="https://reddit.com/r/PlayHollowcraft">Reddit</a> |
      <a href="https://github.com/hollowcraftdev">GitHub</a>
    </div>
    <div class="server-status fade-in fade-in-delay-3">
      <div class="status-indicator">
        <span id="server-status-dot" class="status-dot offline"></span>
        <span id="server-status-text">Checking server...</span>
      </div>
      <div class="player-count">
        <span class="player-label">Players Online:</span>
        <span id="player-counter" class="player-number">0</span>
        <span class="player-max">/ <span id="max-players">20</span></span>
      </div>
    </div>
    <h2 id="about" class="slide-in-left">About Hollowcraft</h2>
    <div class="fade-in">
      <p>Hollowcraft is a Minecraft server that offers a unique and engaging gameplay experience. Our community is dedicated to providing a fun and inclusive environment for players of all skill levels.</p>
    </div>
    <h2 id="screenshots" class="slide-in-right">Screenshots</h2>
    <div class="fade-in">
      <p>Here are some lovely screenshots of Hollowcraft!</p>
    </div>
    <div class="photo-grid scale-in">
      <img src="screenshots/1.png" alt="Hollowcraft Screenshot 1">
      <img src="screenshots/2.png" alt="Hollowcraft Screenshot 2">
      <img src="screenshots/3.png" alt="Hollowcraft Screenshot 3">
      <img src="screenshots/4.png" alt="Hollowcraft Screenshot 4">
      <img src="screenshots/5.png" alt="Hollowcraft Screenshot 5">
      <img src="screenshots/6.png" alt="Hollowcraft Screenshot 6">
    </div>
  </body>

</html>