Skip to content

Commit

Permalink
‼️ THE WRAPPED UPDATE IS HERE ‼️
Browse files Browse the repository at this point in the history
  • Loading branch information
@thecooldoggo
thecooldoggo authored Dec 18, 2024
1 parent b0f57d5 commit b38b931
Show file tree
Hide file tree
Showing 5 changed files with 1,232 additions and 286 deletions.
308 changes: 22 additions & 286 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,189 +15,31 @@
<meta property="og:type" content="website">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
<style>
html {
scroll-behavior: smooth;
}
body {
font-family: 'Ubuntu', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to bottom right, #121212, #380343);
color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
}
.container {
max-width: 800px;
width: 100%;
margin: 20px;
padding: 20px;
background-color: #1e1e1e;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

header {
background: linear-gradient(to bottom left, #f1abc0, #d72733, #380343);
color: #ffffff;
padding: 20px;
text-align: center;
border-radius: 8px 8px;
}

h1 {
margin: 0;
font-size: 2.5em;
}

main {
padding: 20px;
}

#stats {
background: #2c2c2c;
border-radius: 8px;
padding: 20px;
}

h2 {
border-bottom: 3px solid #d92531;
padding-bottom: 10px;
margin-bottom: 20px;
color: #ffffff;
}

h3 {
margin-top: 0;
color: #ffffff;
margin-bottom: 0;
}

ul {
list-style: none;
padding: 0;
}

li {
background: #333333;
margin: 5px 0;
padding: 10px;
border-radius: 4px;
color: #ffffff;
transition: background 0.3s, transform 0.3s;
opacity: 0;
animation: fadeIn 0.5s forwards;
}

li:hover {
background: #444444;
transform: scale(1.05);
}

footer {
text-align: center;
padding: 10px 0;
background: linear-gradient(to bottom right, #f1abc0, #d72733, #380343);
color: #fff;
margin-top: 20px;
border-radius: 8px 8px;
}

button {
background: linear-gradient(to bottom left, #f1abc0, #d72733, #380343);
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
margin-top: 14px;
}

button:hover {
transform: scale(1.05);
}

#mentions-count {
font-size: 1.5em;
background: linear-gradient(to bottom, red, rgb(74, 39, 163));
-webkit-background-clip: text;
color: transparent;
padding: 0;
margin: 0;
font-weight: bold;
}

#total-mentions {
margin: 0;
padding: 0;
padding-bottom: .3em;
}

.top-user-name {
font-weight: bold;
}

.top-user-count {
background: linear-gradient(to bottom, red, rgb(74, 39, 163));
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
}

.highlight {
background: linear-gradient(to bottom left, #f1abc0, #d72733, #380343);
-webkit-background-clip: text;
color: transparent;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

.fade-out {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-out.hidden {
opacity: 0;
transform: translateY(20px);
}

.parallax {
background-attachment: fixed;
background-size: cover;
}
</style>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="wrapped.css">
</head>
<body class="parallax">
<div class="container">
<header>
<h1>How many times has customs been asked for in NickEh30's Chat?</h1>
<button id="toggle-button">Show Daily Stats</button>
</header>
<div class="wrapped-launcher">
<button id="wrapped-button" class="wrapped-button">
2024 Custom Tracker Wrapped is here 👀
</button>
</div>
<div id="wrapped-modal" class="wrapped-modal">
<div class="wrapped-content">
<div class="username-container">
<h2>Your Custom Wrapped</h2>
<div class="username-input-container">
<input type="text" id="username-input" placeholder="Enter your Twitch username">
<button id="start-journey">Let's Go!</button>
</div>
</div>
</div>
</div>
<main>
<section id="stats" class="fade-in">
<h2>Requesting custom games is against Nick's chat rules. However, new viewers often ask, so I created a fun tracker. :D</h2>
Expand All @@ -221,114 +63,8 @@ <h3>Top 10 Users:</h3>
<p>Counting since 8/22/24</p>
</footer>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script defer>
document.addEventListener('DOMContentLoaded', () => {
const toggleButton = document.getElementById('toggle-button');
const statsSection = document.getElementById('stats');
let isShowingDaily = false;
let hasTriggeredConfetti = false;

function fetchData(url, initialLoad = false) {
fetch(url)
.then(response => response.json())
.then(data => {
const userList = document.getElementById('user-list');
const mentionsCount = document.getElementById('mentions-count');
const topUserInfo = document.getElementById('top-user-info');
userList.innerHTML = '';
const sortedUsers = Object.entries(data.users).sort((a, b) => b[1] - a[1]).slice(0, 10);
const fragment = document.createDocumentFragment();
sortedUsers.forEach(([user, count], index) => {
const li = document.createElement('li');
li.textContent = `${user}: ${count}`;
li.style.animationDelay = `${index * 0.1}s`;
fragment.appendChild(li);
});
userList.appendChild(fragment);
countUp(mentionsCount, 0, data.total_mentions, 1000);
if (sortedUsers.length > 0) {
const [topUser, maxMessages] = sortedUsers[0];
topUserInfo.innerHTML = `<span class="top-user-name highlight">${topUser}</span> with <span class="top-user-count">${maxMessages}</span> mentions.`;
}
if (initialLoad && !hasTriggeredConfetti) {
setTimeout(triggerConfetti, 1000);
hasTriggeredConfetti = true;
}
})
.catch(error => {
console.error('Error fetching stats:', error);
});
}

function toggleStats() {
isShowingDaily = !isShowingDaily;
const url = isShowingDaily ? 'https://thecooldoggo.hackclub.app/daily_customs_count.json' : 'https://thecooldoggo.hackclub.app/customs_count.json';
toggleButton.textContent = isShowingDaily ? 'Show Total Stats' : 'Show Daily Stats';
statsSection.classList.add('fade-out');
statsSection.classList.add('hidden');

setTimeout(() => {
fetchData(url);
statsSection.classList.remove('fade-out');
statsSection.classList.remove('hidden');
statsSection.classList.add('fade-in');
setTimeout(() => {
statsSection.classList.remove('fade-in');
}, 500);
}, 500);
}

toggleButton.addEventListener('click', toggleStats);
fetchData('https://thecooldoggo.hackclub.app/customs_count.json', true);

const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});

fadeInElements.forEach(element => {
observer.observe(element);
});
});

function countUp(element, start, end, duration) {
let startTime = null;

function animate(currentTime) {
if (startTime === null) startTime = currentTime;
const progress = currentTime - startTime;
const easing = easeOutCubic(progress / duration);
const current = Math.min(Math.floor(easing * (end - start) + start), end);
element.textContent = formatNumber(current);

if (current < end) {
requestAnimationFrame(animate);
}
}

function easeOutCubic(t) {
return 1 - Math.pow(1 - t, 3);
}

requestAnimationFrame(animate);
}

function triggerConfetti() {
confetti({
particleCount: 270,
spread: 150,
origin: { y: 0.5 }
});
}

function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
</body>
</html>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script src="main.js"></script>
<script src="wrapped.js"></script>
</html>
Loading

0 comments on commit b38b931

Please sign in to comment.