about to refactor

index.html

@@ -29,7 +29,14 @@
 				</div>
 			</div>
 		</div>
-
+		<div class="container">
+			<div class="counter-wrapper">
+				<div class="counter-container" id="counter"></div>
+				<div class="counter-text" id="counterText" style="opacity: 0; transition: opacity 1s ease-in;">
+					in <img src="xet.png" alt="Xet" class="xet-logo">
+				</div>
+			</div>
+		</div>
 		<div class="charts-container">
 			<div class="chart-card">
 				<div class="card">
@@ -49,7 +56,6 @@
 				</div>
 			</div>
 		</div>
-	
 
     <script>
 
@@ -58,12 +64,15 @@
 
 		const FILE_CSV_URL = 'https://huggingface.co/datasets/jsulz/ready-xet-go/resolve/main/file-progress.csv';
 
+		const BYTES_CSV_URL = 'https://huggingface.co/datasets/jsulz/ready-xet-go/resolve/main/bytes-progress.csv';
+
 		(async () => {
 			/* 
 			* Data fetching and parsing
 			*/
 			const repo_rows = [];
-			const file_rows = [];                          
+			const file_rows = [];     
+			const bytes_rows = [];                     
 
 			const repo_csv = await new Promise((resolve, reject) => {
 				Papa.parse(REPO_CSV_URL, {
@@ -101,6 +110,23 @@
 				}
 			});
 
+			const bytes_csv = await new Promise((resolve, reject) => {
+				Papa.parse(BYTES_CSV_URL, {
+				download: true,
+				header : true,
+				complete: resolve,
+				error   : reject
+				});
+			});
+			bytes_csv.data.forEach(row => {
+				if (row.date && row.bytes) {
+					bytes_rows.push({
+						date: new Date(row.date),
+						bytes: parseInt(row.bytes, 10)
+					});
+				}
+			});
+
 			/* 
 			* Progress Bar
 			*/
@@ -192,8 +218,8 @@
 			//
 
 			// Set up donut chart data
-			lfs_file_count = file_rows[file_rows.length - 1].lfs_files;
-			xet_file_count = file_rows[file_rows.length - 1].xet_files;
+			const lfs_file_count = file_rows[file_rows.length - 1].lfs_files;
+			const xet_file_count = file_rows[file_rows.length - 1].xet_files;
 
 
 			// Initialize donut chart
@@ -226,7 +252,197 @@
 					}
 				}
 			});
+
+
+
+
+			/*
+			* Counter
+			*/
+
+			// 5x7 pixel patterns for each character (1=pixel on, 0=pixel off)
+			const patterns = {
+				'1': [
+					'00100',
+					'01100',
+					'00100',
+					'00100',
+					'00100',
+					'00100',
+					'01110'
+				],
+				'2': [
+					'01110',
+					'10001',
+					'00001',
+					'00010',
+					'00100',
+					'01000',
+					'11111'
+				],
+				'3': [
+					'01110',
+					'10001',
+					'00001',
+					'00110',
+					'00001',
+					'10001',
+					'01110'
+				],
+				'4': [
+					'00010',
+					'00110',
+					'01010',
+					'10010',
+					'11111',
+					'00010',
+					'00010'
+				],
+				'5': [
+					'11111',
+					'10000',
+					'10000',
+					'11110',
+					'00001',
+					'10001',
+					'01110'
+				],
+				'6': [
+					'01110',
+					'10001',
+					'10000',
+					'11110',
+					'10001',
+					'10001',
+					'01110'
+				],
+				'7': [
+					'11111',
+					'00001',
+					'00010',
+					'00100',
+					'01000',
+					'01000',
+					'01000'
+				],
+				'8': [
+					'01110',
+					'10001',
+					'10001',
+					'01110',
+					'10001',
+					'10001',
+					'01110'
+				],
+				'9': [
+					'01110',
+					'10001',
+					'10001',
+					'01111',
+					'00001',
+					'10001',
+					'01110'
+				],
+				'0': [
+					'01110',
+					'10001',
+					'10001',
+					'10001',
+					'10001',
+					'10001',
+					'01110'
+				],
+				'.': [
+					'00000',
+					'00000',
+					'00000',
+					'00000',
+					'00000',
+					'00100',
+					'01110'
+				],
+				'P': [
+					'11110',
+					'10001',
+					'10001',
+					'11110',
+					'10000',
+					'10000',
+					'10000'
+				],
+				'B': [
+					'11110',
+					'10001',
+					'10001',
+					'11110',
+					'10001',
+					'10001',
+					'11110'
+				]
+			};
+
+			console.log(bytes_rows[bytes_rows.length - 1].bytes)
+			// Convert bytes to PB and format as string
+			const bytesInPB = 1024 ** 5;
+			// Calculate the number of PBs and round to 2 decimal places
+			const text = (bytes_rows[bytes_rows.length - 1].bytes / bytesInPB).toFixed(2) + 'PB';
+			console.log(text)
+			const container = document.getElementById('counter');
+			const pixelSize = 5; // Match CSS variable
+			const pixelGap = 1;
+			let allPixels = [];
+
+			// Create characters and their pixels
+			text.split('').forEach((char, charIndex) => {
+				const charDiv = document.createElement('div');
+				charDiv.className = 'character';
+				
+				const pattern = patterns[char];
+				if (!pattern) return;
+
+				// Generate pixels based on pattern
+				pattern.forEach((row, rowIndex) => {
+					row.split('').forEach((cell, colIndex) => {
+						if (cell === '1') {
+							const pixel = document.createElement('div');
+							pixel.className = 'pixel';
+							
+							// Calculate final position within character grid
+							const finalX = colIndex * (pixelSize + pixelGap);
+							const finalY = rowIndex * (pixelSize + pixelGap);
+							
+							pixel.style.left = `${finalX}px`;
+							pixel.style.top = `${finalY}px`;
+							
+							charDiv.appendChild(pixel);
+							allPixels.push(pixel);
+						}
+					});
+				});
+				
+				container.appendChild(charDiv);
+			});
+
+			console.log(allPixels)
+
+			// Animate pixels falling into their final positions
+			allPixels.forEach((pixel, index) => {
+				// Stagger the landing times for a cascading effect
+				const delay = Math.random() * 50 + (index * 50);
+				
+				setTimeout(() => {
+					pixel.classList.add('landed');
+				}, delay);
+			});
+			const maxDelay = Math.max(...allPixels.map((_, index) => Math.random() * 50 + (index * 50)));
+			setTimeout(() => {
+				const textDiv = document.getElementById('counterText');
+				textDiv.style.opacity = '1';
+			}, maxDelay + 500);
+
 		})();
+
+
     </script>
 </body>
 </html>

style.css

@@ -268,4 +268,64 @@ canvas {
         flex-direction: column;
         gap: 24px;
     }
+}
+
+:root {
+    --pixel-size: 5px;
+    --pixel-color: oklch(.585 .233 277.117);
+    --bg-color: #000;
+}
+
+.counter-container {
+    display: flex;
+    gap: calc(var(--pixel-size) * 3);
+    position: relative;
+    max-width: 350px;
+    max-height: 150px;
+    overflow: hidden;
+    margin: 0 auto;
+    justify-content: center;
+}
+
+.character {
+    width: calc(var(--pixel-size) * 5 + 4px);
+    height: calc(var(--pixel-size) * 7 + 6px);
+    position: relative;
+}
+
+.pixel {
+    width: var(--pixel-size);
+    height: var(--pixel-size);
+    background: var(--pixel-color);
+    position: absolute;
+    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: translateY(-200px);
+    opacity: 1;
+    box-shadow: 0 0 2px var(--pixel-color);
+}
+
+.pixel.landed {
+    transform: translateY(0);
+}
+
+.counter-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem; /* Adjust spacing as needed */
+}
+
+.counter-text {
+    display: flex;
+    align-items: center; /* or center */
+    gap: 0.5rem;
+    justify-content: center;
+    line-height: 2em;
+}
+
+.xet-logo {
+    height: 2.5em; /* Match text size exactly */
+    width: auto;
+    display: inline-block;
+    vertical-align: baseline;
 }