streamstats.github.io/index.html at master · StreamStats/streamstats.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <title>StreamStats</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    a {
      color: #16aaf2;
    }

    .backer {
      background: #16aaf2;
    }

    .backer-dark {
      background: #0c99dd;
    }
  </style>
</head>

<body>

  <header class="z-depth-1">
    <nav class="z-depth-0 backer-dark">
      <div class="nav-wrapper container">
        <ul class="left">
          <li><a href="streamstats.github.io">Home</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <header>
    <div class="backer white-text valign-wrapper" style="height: 480px;">
      <div class="container center-align valign">
        <img src="https://bit.ly/StreamStatsLogo" style="height: 140px;">
        <h1>StreamStats</h1>
        <h4>We Track "Almost" Every Site</h4>
      </div>
    </div>
  </header>

  <main class="container" style="padding: 2rem 0">
    <!-- Your main content here -->
    <div id="repo-cards" class="row"></div>
  </main>

  <footer class="container section grey-text center-align">
    &copy; <span id="github-year"></span> StreamStats
  </footer>

  <script>
    // Function to generate a random color excluding unreadable colors and white
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      do {
        color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
      } while (isUnreadableColor(color) || color === '#FFFFFF'); // Exclude unreadable and white colors
      return color;
    }

    // Function to check if a color is unreadable
    function isUnreadableColor(hexColor) {
      // Check if the color is too bright (light text on light background) or too dark (dark text on dark background)
      const rgb = parseInt(hexColor.substring(1), 16);
      const r = (rgb >> 16) & 0xff;
      const g = (rgb >> 8) & 0xff;
      const b = (rgb >> 0) & 0xff;

      const brightness = (r * 299 + g * 587 + b * 114) / 1000;
      return brightness > 200 || brightness < 50; // Modify these thresholds as needed
    }

    // Fetch repositories from StreamStats GitHub organization
    const org = 'streamstats';
    fetch(`https://api.github.com/orgs/${org}/repos`)
      .then(response => response.json())
      .then(repos => {
        // Select the container for repository cards
        const repoCards = document.getElementById('repo-cards');

        // Filter out repositories with specific names
        const excludedNames = ['.github', 'streamstats.github.io', 'Support', 'BeamStatsDev', 'MixerStats', 'PlayerStats', 'Branding', 'NumberTrivia', 'Twitch', 'BeamServerStats', 'StreamStatsApp', 'DataStorage', 'HitboxStats', 'StreamStatsAppDev', 'skin', 'TwitchStatsDev'];
        const filteredRepos = repos.filter(repo => !excludedNames.includes(repo.name));

        // Iterate through the repositories and create cards
        filteredRepos.forEach(repo => {
          // Create card element
          const card = document.createElement('div');
          card.classList.add('col', 's12', 'm6');

          // Generate a random color for the card content
          const randomColor = getRandomColor();

          card.innerHTML = `
          <style>    .backer {
      background: ${randomColor};
    }

    .backer-dark {
      background: ${randomColor};
    }</style>
            <div class="card blue-grey darken-1">
              <div class="card-content white-text" style="background-color: ${randomColor};">
                <span class="card-title">${repo.name}</span>
                <p>${repo.description || `Project For @StreamStats`}</p>
              </div>
              <div class="card-action">
                <a href="${repo.homepage || repo.html_url}" class="card-link">Link</a>
              </div>
            </div>
          `;

          // Append the card to the container
          repoCards.appendChild(card);
        });
      })
      .catch(error => console.error('Error fetching repositories:', error));
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <script>
    // Fetch the GitHub repository creation date
    fetch('https://api.github.com/users/StreamStats')
      .then(response => response.json())
      .then(repoInfo => {
        const createdYear = new Date(repoInfo.created_at).getFullYear();
        document.getElementById('github-year').textContent = createdYear;
      })
      .catch(error => console.error('Error fetching GitHub repository info:', error));
  </script>
</body>

</html>