mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-06 12:45: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
BIN
assets/2147811240.jpg
Normal file
BIN
assets/2147811240.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 KiB |
BIN
assets/2147835077.jpg
Normal file
BIN
assets/2147835077.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
assets/241130_04h46m22s_screenshot.png
Normal file
BIN
assets/241130_04h46m22s_screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
assets/54362.jpg
Normal file
BIN
assets/54362.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
BIN
assets/back.jpg
Normal file
BIN
assets/back.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 533 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
183
developers.css
183
developers.css
@@ -9,10 +9,12 @@
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url(./assets/background.png);
|
||||
background: url(./assets/back.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: 0.5s;
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -20,7 +22,7 @@ body {
|
||||
}
|
||||
|
||||
body:has(.box[data-color="clr1"]:hover) {
|
||||
background: url(./assets/eshanized.png);
|
||||
background: url(./assets/54362.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@@ -29,12 +31,184 @@ body:has(.box[data-color="clr2"]:hover) {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body:has(.box[data-color="clr3"]:hover) {
|
||||
background: url(./assets/iconixed.jpg);
|
||||
background: url(./assets/2147811240.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body:has(.box[data-color="clr4"]:hover) {
|
||||
background: url(./assets/2147835077.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
/* nav */
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background-color: rgba(26, 31, 44, 0);
|
||||
z-index: 1000;
|
||||
padding-inline: 5rem;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a::before {
|
||||
background: #754ffe;
|
||||
content: "";
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
a:hover::before {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
/* devs */
|
||||
* {
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
.git-i{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.git-contributions {
|
||||
width: 500x;
|
||||
height: 160px;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
border: solid 1px #3d444d;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
|
||||
.contribute-calendar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.weeks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.weeks p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.months {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
height: 22px;
|
||||
gap: 20px;
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
.bottom-scale {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.bottom-scale p {
|
||||
margin: 0;
|
||||
color: #9198a1;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.legend-1 {
|
||||
background-color: #171c21;
|
||||
}
|
||||
|
||||
.legend-2 {
|
||||
background-color: #1f432b;
|
||||
}
|
||||
.legend-3 {
|
||||
background-color: #2e6b38;
|
||||
}
|
||||
.legend-4 {
|
||||
background-color: #52a44f;
|
||||
}
|
||||
.legend-5 {
|
||||
background-color: #6cd064;
|
||||
}
|
||||
|
||||
#led-container {
|
||||
padding: 10px;
|
||||
}
|
||||
.led-row {
|
||||
display: flex;
|
||||
}
|
||||
.led {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin: 1.8px;
|
||||
border-radius: 20%;
|
||||
background-color: #171c21;
|
||||
}
|
||||
.led.on-1 {
|
||||
background-color: #1f432b;
|
||||
}
|
||||
.led.on-2 {
|
||||
background-color: #2e6b38;
|
||||
}
|
||||
.led.on-3 {
|
||||
background-color: #52a44f;
|
||||
}
|
||||
|
||||
.led.on-4 {
|
||||
background-color: #6cd064;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
overflow: hidden;
|
||||
padding-top: 3em;
|
||||
@@ -167,3 +341,4 @@ h2 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,9 +6,74 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Snigdha OS | Developers</title>
|
||||
<link rel="stylesheet" href="developers.css">
|
||||
<script src="./developers.js" defer></script>
|
||||
</head>
|
||||
<section>
|
||||
<h2>Meet The Developers</h2>
|
||||
<nav class="navbar">
|
||||
<a href="/">
|
||||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="60" height="60">
|
||||
<title>Snigdha OS</title>
|
||||
<style>
|
||||
.s0 { display: none;fill: #28282b }
|
||||
.s1 { fill: #ffffff }
|
||||
.s2 { display: none;fill: #754ffe }
|
||||
</style>
|
||||
<path id="Shape 1" class="s0" d="m633-38v587h-755v-587z"/>
|
||||
<path id="<Compound Path>" fill-rule="evenodd" class="s1" d="m226.7 303.9q2.1-37-25.4-57.2c-36.2-25.2-77-42-99.1-76.3-6.8-10.4-11.8-22.5-14.4-36.9 4.7 9.6 11.9 17.9 20.7 23.9 4.4-8.1 9.4-15.7 15-22.9q2.5 40.2 45.1 68.2l38.5 29q23.7 18 35.6 41.9c1.3-19.3 15.1-59.2-6.4-70.6q1.8 15-1.3 22.3c-45.6-16.6-74.9-65.1-89.5-114.3-5.8-19.5-9.3-39.1-10.5-56.9 4.2 17.1 12.6 32.8 24.6 45.7 27.6-19.5 61.3-31 97.7-31 34.6 0 66.7 10.4 93.5 28.2 16.5-8.7 27.9-24.5 31-42.9-1.3 18.3-4.9 38.4-11 58.5-14.7 48.6-43.9 96.3-89.1 112.7 1.5-14.9-7.7-28.7-22-33.1 9.6 0.6 18.3-5.8 20.4-15.2-17.6-3.4-35.6 2.7-47.6 16 10.3-1 20.5 2.8 27.6 10.4 5 5.4 8.1 12.3 8.7 19.5 0.3 2.9 0.2 5.9-0.3 8.8-2.8 13.8-7.2 27.1-13.2 39.9-6.5 16.4-4.2 35.1 6.2 49.4 0.6-16.5 4.9-32.7 12.6-47.4q11.9-23.9 35.5-41.9l38.5-29q41.3-27.1 45-65.6c4.6 6.3 8.9 12.9 12.7 19.8 8.7-6 15.9-14.1 20.9-23.4-2.6 14.4-7.6 26.5-14.3 37-22.1 34.2-63 51-99.2 76.2q-27.5 20.2-25.4 57.2 18.3-22.1 51.1-22.3 71.5-1.4 87.4-41.3c-1.3 83.7-63.4 152.6-144.2 164.5-4.3 9.1-13.1 15.4-23.1 16.5-10-1.4-18.8-7.4-23.8-16.1-82.1-10.7-145.6-80.2-146.9-164.9q15.8 39.9 87.3 41.3 32.9 0.2 51.1 22.3zm69.6 87.7q16.5-16.9 2.2-40-11.4-14.3-18.8-38.3-13.2 26.6 0.2 45.3 17 17.5 16.4 33zm-25.8 14.5c2.3-5.2 3.5-10.8 3.5-16.6 0-12.3-5.5-24-15-31.8-9.5 7.8-15 19.5-15 31.8 0 5.9 1.2 11.6 3.6 16.9 2.6 5.7 6.4 10.8 11.4 14.9 5-4.1 8.9-9.4 11.5-15.2zm155.4-180.4c0.1 1.6 5.2 1 7.7 0.9-25.5 13.9-57.7 27.1-81.7 31.7q-23.6 5.1-42.4 15 10.1-15.1 39.8-24.9 56.3-21.3 72.3-50.3c2.2 8.9 3.6 18.2 4.3 27.6zm-337.1-0.1c0.8-9.1 2.1-18.6 4.1-27.5q16.1 29 72.3 50.3 29.8 9.8 39.8 24.9-18.7-9.9-42.3-15c-24.1-4.6-58.1-18.8-83.5-32.7 2.9 0.4 9.5 1.6 9.6 0zm149.2 133q13.5-18.7 0.3-45.3-7.4 24-18.8 38.3-14.3 23.1 2.1 40-0.5-15.5 16.4-33z"/>
|
||||
<path id="snigdhaos.org" class="s2" aria-label="snigdhaos.org" d="m182.5 454.2q-1.2 0-2.4-0.2-1.2-0.4-1.8-0.8l0.9-2q1.4 1 3.3 1 1.8 0 1.8-1.1 0-0.5-0.3-0.7-0.4-0.3-1.4-0.6l-0.9-0.4q-1.5-0.6-2.3-1.4-0.8-0.8-0.8-2.1 0-1.5 1.1-2.3 1.2-0.9 3.2-0.9 1 0 1.9 0.2 1 0.2 1.5 0.6l-0.9 2q-0.3-0.3-1-0.5-0.7-0.2-1.5-0.2-1.7 0-1.7 1 0 0.6 0.4 0.9 0.5 0.3 1.5 0.6 0.1 0.1 0.7 0.3 1.6 0.6 2.3 1.4 0.8 0.7 0.8 1.9 0 1.7-1.3 2.5-1.2 0.8-3.1 0.8zm7.1-0.2v-11h2.5v2q0.5-1 1.5-1.7 0.9-0.6 2.3-0.6 1.7 0 2.6 0.7 0.9 0.7 1.2 2 0.3 1.3 0.3 3.3v5.3h-2.6v-5.2q0-2.1-0.4-3-0.4-1-1.7-1-0.7 0-1.4 0.5-0.8 0.4-1.3 1.3-0.5 0.8-0.5 1.9v5.5zm14 0v-11h2.7v11zm1.3-13.1q-0.7 0-1.2-0.5-0.5-0.5-0.5-1.2 0-0.7 0.5-1.2 0.5-0.5 1.2-0.5 0.8 0 1.3 0.5 0.5 0.5 0.5 1.2 0 0.7-0.5 1.2-0.5 0.5-1.3 0.5zm10.4 18.9q-1.3 0-2.5-0.4-1.1-0.3-1.6-0.6l0.5-2.4q1.6 1 3.5 1 1.4 0 2.4-0.7 1-0.7 1-2.7v-1.9q-0.5 0.9-1.6 1.5-1.1 0.6-2.5 0.6-1.4 0-2.6-0.7-1.2-0.7-1.9-2-0.7-1.3-0.7-3.1 0-1.6 0.6-2.9 0.7-1.4 1.9-2.1 1.2-0.7 2.9-0.7 0.9 0 1.8 0.3 0.8 0.4 1.4 0.9 0.6 0.5 0.8 0.9v-1.8h2.5v10.9q0 2.8-1.5 4.3-1.4 1.6-4.4 1.6zm-0.1-7.7q1.4 0 2.3-1 1-0.9 1-2.5v-0.1q0-1.1-0.5-1.9-0.4-0.8-1.2-1.3-0.7-0.4-1.6-0.4-1.5 0-2.4 1-0.8 1-0.8 2.6 0 1.6 0.8 2.6 0.9 1 2.4 1zm14.2 2.1q-1.5 0-2.8-0.7-1.3-0.7-2-2-0.8-1.3-0.8-3 0-2.7 1.5-4.2 1.5-1.6 4-1.6 1.3 0 2.5 0.7 1.2 0.7 1.6 1.6l-0.2-1.8v-6.8h2.6v17.6h-2.5v-1.9q-0.4 0.8-1.5 1.5-1.1 0.6-2.4 0.6zm0.4-2.1q1.4 0 2.3-1 0.9-0.9 0.9-2.5v-0.1q0-1.1-0.4-1.9-0.4-0.8-1.2-1.3-0.7-0.4-1.6-0.4-1.6 0-2.4 1-0.8 1-0.8 2.6 0 1.6 0.8 2.6 0.8 1 2.4 1zm9.5 1.9v-17.6h2.6v6.6l-0.1 2q0.4-1 1.4-1.6 1-0.7 2.4-0.7 1.7 0 2.6 0.7 0.9 0.7 1.2 2 0.3 1.3 0.3 3.3v5.3h-2.5v-5.3q0-1.4-0.2-2.2-0.2-0.8-0.6-1.2-0.5-0.4-1.4-0.4-0.7 0-1.4 0.4-0.8 0.4-1.2 1.3-0.5 0.8-0.5 1.9v5.5zm18.5 0.2q-1.5 0-2.7-0.7-1.3-0.7-2-2-0.8-1.3-0.8-3 0-1.8 0.7-3.1 0.6-1.3 1.9-2 1.2-0.7 2.8-0.7 1 0 1.8 0.3 0.9 0.4 1.5 0.9 0.5 0.5 0.7 0.9l0.1-1.8h2.4v11h-2.4l-0.1-1.9q-0.4 0.8-1.4 1.5-1.1 0.6-2.5 0.6zm0.5-2.1q1.3 0 2.3-1 0.9-0.9 0.9-2.5v-0.1q0-1.1-0.4-1.9-0.5-0.8-1.2-1.2-0.7-0.5-1.6-0.5-1.6 0-2.4 1-0.9 1-0.9 2.6 0 1.6 0.9 2.6 0.8 1 2.4 1zm14.6 2.1q-1.7 0-3.1-0.7-1.3-0.8-2-2.1-0.7-1.3-0.7-2.9 0-1.6 0.7-2.9 0.7-1.4 2-2.1 1.3-0.8 3.1-0.8 1.7 0 3 0.8 1.3 0.7 2 2.1 0.7 1.3 0.7 2.9 0 1.6-0.7 2.9-0.7 1.3-2 2.1-1.3 0.7-3 0.7zm0-2.1q1.4 0 2.2-1 0.8-1 0.8-2.6 0-1.6-0.8-2.6-0.9-1.1-2.3-1.1-1.4 0-2.2 1.1-0.8 1-0.8 2.6 0 1.5 0.8 2.6 0.9 1 2.3 1zm12.3 2.1q-1.2 0-2.4-0.2-1.3-0.4-1.8-0.8l0.9-2q1.4 1 3.3 1 1.8 0 1.8-1.1 0-0.5-0.4-0.7-0.4-0.3-1.3-0.6l-0.9-0.4q-1.5-0.6-2.3-1.4-0.9-0.8-0.9-2.1 0-1.5 1.2-2.3 1.2-0.9 3.2-0.9 1 0 1.9 0.2 1 0.2 1.5 0.6l-1 2q-0.3-0.3-1-0.5-0.6-0.2-1.5-0.2-1.7 0-1.7 1 0 0.6 0.5 0.9 0.4 0.3 1.5 0.6 0.1 0.1 0.7 0.3 1.5 0.6 2.3 1.4 0.7 0.7 0.7 1.9 0 1.7-1.2 2.5-1.2 0.8-3.1 0.8zm8.8 0q-0.7 0-1.2-0.4-0.5-0.5-0.5-1.3 0-0.7 0.5-1.2 0.5-0.5 1.2-0.5 0.7 0 1.2 0.5 0.5 0.5 0.5 1.2 0 0.8-0.5 1.3-0.5 0.4-1.2 0.4zm9.9 0q-1.7 0-3.1-0.7-1.3-0.8-2-2.1-0.7-1.3-0.7-2.9 0-1.6 0.7-2.9 0.7-1.4 2-2.1 1.3-0.8 3.1-0.8 1.7 0 3 0.8 1.3 0.7 2 2.1 0.7 1.3 0.7 2.9 0 1.6-0.7 2.9-0.7 1.3-2 2.1-1.3 0.7-3 0.7zm0-2.1q1.4 0 2.2-1 0.8-1 0.8-2.6 0-1.6-0.8-2.6-0.9-1.1-2.3-1.1-1.4 0-2.2 1.1-0.8 1-0.8 2.6 0 1.5 0.9 2.6 0.8 1 2.2 1zm8.4 1.9v-11h2.6v2.1q0.4-1.1 1.3-1.7 0.8-0.7 1.9-0.7 0.8 0 1.1 0.1l-0.4 2.7q-0.2-0.2-0.9-0.2-1.1 0-2.1 0.7-0.9 0.8-0.9 2.3v5.7zm14 5.8q-1.2 0-2.4-0.4-1.2-0.3-1.7-0.6l0.6-2.4q1.6 1 3.5 1 1.4 0 2.4-0.7 1-0.7 1-2.7v-1.9q-0.5 0.9-1.6 1.5-1.2 0.6-2.5 0.6-1.5 0-2.7-0.7-1.2-0.7-1.9-2-0.7-1.3-0.7-3.1 0-1.6 0.7-2.9 0.7-1.4 1.9-2.1 1.2-0.7 2.8-0.7 1 0 1.8 0.3 0.9 0.4 1.5 0.9 0.6 0.5 0.8 0.9v-1.8h2.4v10.9q0 2.8-1.4 4.3-1.4 1.6-4.5 1.6zm0-7.7q1.4 0 2.3-1 0.9-0.9 0.9-2.5v-0.1q0-1.1-0.4-1.9-0.4-0.8-1.2-1.3-0.7-0.4-1.6-0.4-1.5 0-2.4 1-0.8 1-0.8 2.6 0 1.6 0.8 2.6 0.8 1 2.4 1z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#">Get Started</a>
|
||||
<a href="#">Articles</a>
|
||||
<a href="#">Community</a>
|
||||
<a href="/developers.html" target="_blank">Developers</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ==========meet the devs================ -->
|
||||
<div class="git-i">
|
||||
<div class="git-contributions">
|
||||
<div class="months">
|
||||
<p>Jan</p>
|
||||
<p>Feb</p>
|
||||
<p>Mar</p>
|
||||
<p>Apr</p>
|
||||
<p>May</p>
|
||||
<p>Jun</p>
|
||||
<p>Jul</p>
|
||||
<p>Aug</p>
|
||||
<p>Sep</p>
|
||||
<p>Oct</p>
|
||||
<p>Nov</p>
|
||||
<p>Dec</p>
|
||||
</div>
|
||||
<div class="contribute-calendar">
|
||||
<div class="weeks">
|
||||
<p>Mon</p>
|
||||
<p>Wed</p>
|
||||
<p>Fri</p>
|
||||
</div>
|
||||
<div>
|
||||
<div id="led-container"></div>
|
||||
<div class="bottom-scale">
|
||||
<p>Less</p>
|
||||
<div class="color-box legend-1"></div>
|
||||
<div class="color-box legend-2"></div>
|
||||
<div class="color-box legend-3"></div>
|
||||
<div class="color-box legend-4"></div>
|
||||
<div class="color-box legend-5"></div>
|
||||
<p>More</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =========Meet the devs end============= -->
|
||||
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="box" data-color="clr1">
|
||||
<div class="imgBox">
|
||||
@@ -47,16 +112,16 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" data-color="clr3">
|
||||
<div class="box" data-color="clr4">
|
||||
<div class="imgBox">
|
||||
<img src="https://avatars.githubusercontent.com/u/157954129?v=4" alt="Werewolf">
|
||||
<img src="./assets/241130_04h46m22s_screenshot.png" alt="Werewolf">
|
||||
</div>
|
||||
<div class="glass">
|
||||
<h3>Utkarsh Gaur<br />
|
||||
<span>Developer</span>
|
||||
</h3>
|
||||
<ul>
|
||||
<a href="https://en.wikipedia.org/wiki/Werewolf" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a>
|
||||
<a href="" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
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