mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-06 20:55:18 +02:00
💅 style(): restructured and styled developers page
git graph moving text, some new changes in the images added navbar
This commit is contained in:
Utkarsh Gaur
346
developers.js
Normal file
346
developers.js
Normal file
@@ -0,0 +1,346 @@
|
||||
const container = document.getElementById("led-container");
|
||||
const ROWS = 7;
|
||||
const COLS = 50;
|
||||
const ledMatrix = [];
|
||||
|
||||
// Create LED matrix //
|
||||
for (let i = 0; i < ROWS; i++) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "led-row";
|
||||
ledMatrix[i] = [];
|
||||
for (let j = 0; j < COLS; j++) {
|
||||
const led = document.createElement("div");
|
||||
led.className = "led";
|
||||
row.appendChild(led);
|
||||
ledMatrix[i][j] = led;
|
||||
}
|
||||
container.appendChild(row);
|
||||
}
|
||||
|
||||
// LED
|
||||
const font = {
|
||||
A: [
|
||||
[0, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
B: [
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 0]
|
||||
],
|
||||
C: [
|
||||
[0, 1, 1, 1, 1],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[0, 1, 1, 1, 1]
|
||||
],
|
||||
D: [
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 0]
|
||||
],
|
||||
E: [
|
||||
[1, 1, 1, 1, 1],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 1, 1, 1, 1]
|
||||
],
|
||||
F: [
|
||||
[1, 1, 1, 1, 1],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0]
|
||||
],
|
||||
G: [
|
||||
[0, 1, 1, 1, 1],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 1, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[0, 1, 1, 1, 0]
|
||||
],
|
||||
H: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
I: [
|
||||
[1, 1, 1, 1, 1],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[1, 1, 1, 1, 1]
|
||||
],
|
||||
J: [
|
||||
[0, 0, 0, 1, 1],
|
||||
[0, 0, 0, 0, 1],
|
||||
[0, 0, 0, 0, 1],
|
||||
[0, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[0, 1, 1, 1, 0]
|
||||
],
|
||||
K: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 1, 0],
|
||||
[1, 0, 1, 0, 0],
|
||||
[1, 1, 0, 0, 0],
|
||||
[1, 0, 1, 0, 0],
|
||||
[1, 0, 0, 1, 0],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
L: [
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 1, 1, 1, 1]
|
||||
],
|
||||
M: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 0, 1, 1],
|
||||
[1, 0, 1, 0, 1],
|
||||
[1, 0, 1, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
N: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 0, 0, 1],
|
||||
[1, 0, 1, 0, 1],
|
||||
[1, 0, 1, 0, 1],
|
||||
[1, 0, 0, 1, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
O: [
|
||||
[0, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[0, 1, 1, 1, 0]
|
||||
],
|
||||
P: [
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0]
|
||||
],
|
||||
Q: [
|
||||
[0, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 1, 0, 1],
|
||||
[1, 0, 0, 1, 0],
|
||||
[0, 1, 1, 0, 1]
|
||||
],
|
||||
R: [
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 0],
|
||||
[1, 0, 1, 0, 0],
|
||||
[1, 0, 0, 1, 0],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
S: [
|
||||
[0, 1, 1, 1, 1],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[0, 1, 1, 1, 0],
|
||||
[0, 0, 0, 0, 1],
|
||||
[0, 0, 0, 0, 1],
|
||||
[1, 1, 1, 1, 0]
|
||||
],
|
||||
T: [
|
||||
[1, 1, 1, 1, 1],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0]
|
||||
],
|
||||
U: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[0, 1, 1, 1, 0]
|
||||
],
|
||||
V: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[0, 1, 0, 1, 0],
|
||||
[0, 0, 1, 0, 0]
|
||||
],
|
||||
W: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 1, 0, 1],
|
||||
[1, 0, 1, 0, 1],
|
||||
[1, 1, 0, 1, 1],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
X: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[0, 1, 0, 1, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 1, 0, 1, 0],
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1]
|
||||
],
|
||||
Y: [
|
||||
[1, 0, 0, 0, 1],
|
||||
[1, 0, 0, 0, 1],
|
||||
[0, 1, 0, 1, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 0, 1, 0, 0]
|
||||
],
|
||||
Z: [
|
||||
[1, 1, 1, 1, 1],
|
||||
[0, 0, 0, 0, 1],
|
||||
[0, 0, 0, 1, 0],
|
||||
[0, 0, 1, 0, 0],
|
||||
[0, 1, 0, 0, 0],
|
||||
[1, 0, 0, 0, 0],
|
||||
[1, 1, 1, 1, 1]
|
||||
],
|
||||
"-": [
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[1, 1, 1, 1, 1],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0]
|
||||
],
|
||||
" ": [
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0]
|
||||
],
|
||||
0: [
|
||||
[1, 1, 1, 1, 1],
|
||||
[1, 0, 0, 1, 1],
|
||||
[1, 0, 0, 1, 1],
|
||||
[1, 0, 1, 1, 1],
|
||||
[1, 1, 1, 0, 1],
|
||||
[1, 1, 0, 0, 1],
|
||||
[1, 1, 1, 1, 1]
|
||||
]
|
||||
};
|
||||
|
||||
function getTextMatrix(text) {
|
||||
let matrix = Array(7)
|
||||
.fill()
|
||||
.map(() => []);
|
||||
for (let char of text.toUpperCase()) {
|
||||
if (font[char]) {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
matrix[i] = matrix[i].concat(font[char][i]);
|
||||
matrix[i].push(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
return matrix;
|
||||
}
|
||||
const classNames = ["on-1", "on-2", "on-3", "on-4"];
|
||||
|
||||
function displayScrollingText(text) {
|
||||
const textMatrix = getTextMatrix(text + " "); // Add some space at the end
|
||||
let startCol = -COLS; // Start off-screen to the left
|
||||
let lastUpdate = performance.now();
|
||||
const delay = 100; // Adjust this value to control speed (higher = slower, in milliseconds)
|
||||
|
||||
function updateDisplay() {
|
||||
const now = performance.now();
|
||||
if (now - lastUpdate >= delay) {
|
||||
lastUpdate = now;
|
||||
|
||||
for (let i = 0; i < ROWS; i++) {
|
||||
for (let j = 0; j < COLS; j++) {
|
||||
const textCol = (startCol + j) % textMatrix[0].length;
|
||||
|
||||
if (textCol >= 0) {
|
||||
const isOn = textMatrix[i][textCol] === 1;
|
||||
const randomClass =
|
||||
classNames[Math.floor(Math.random() * classNames.length)];
|
||||
|
||||
// Remove all possible 'on' classes
|
||||
ledMatrix[i][j].classList.remove("on-1", "on-2", "on-3", "on-4");
|
||||
|
||||
if (isOn) {
|
||||
ledMatrix[i][j].classList.add(randomClass);
|
||||
}
|
||||
} else {
|
||||
// Remove all possible 'on' classes if off-screen
|
||||
ledMatrix[i][j].classList.remove("on-1", "on-2", "on-3", "on-4");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
startCol++;
|
||||
|
||||
if (startCol > textMatrix[0].length) {
|
||||
startCol = -COLS;
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(updateDisplay);
|
||||
}
|
||||
|
||||
updateDisplay();
|
||||
}
|
||||
// Text Display - TODO: Numbers
|
||||
displayScrollingText("Meet The Developers");
|
||||
Reference in New Issue
Block a user