diff --git a/src/components/source.astro b/src/components/source.astro
index 66bfbf7..77b60b0 100644
--- a/src/components/source.astro
+++ b/src/components/source.astro
@@ -3,6 +3,10 @@ import { FaGithub } from 'react-icons/fa/index';
import { SpecialButton } from './special-button';
import { Container } from './container';
+
+import { generateRandomBinaryString } from '@/helpers/binary';
+
+const binary = generateRandomBinaryString(1000);
---
@@ -15,7 +19,7 @@ import { Container } from './container';
- Open Source
+ Open Source
Moodist is free and open-source!
@@ -23,6 +27,8 @@ import { Container } from './container';
Source Code
+
+ {binary}
@@ -34,9 +40,27 @@ import { Container } from './container';
& .wrapper {
position: relative;
padding: 0 20px 40px;
+ overflow: hidden;
background: linear-gradient(transparent, rgb(24 24 27 / 70%));
border-radius: 0 0 20px 20px;
+ & .binary {
+ position: absolute;
+ bottom: -2.1rem;
+ left: 50%;
+ width: calc(100% + 10px);
+ height: 200px;
+ overflow: hidden;
+ font-family: 'Nimbus Mono PS', 'Courier New', monospace;
+ color: var(--color-foreground-subtler);
+ word-break: break-all;
+ cursor: default;
+ user-select: none;
+ opacity: 0.35;
+ mask-image: linear-gradient(transparent, #000);
+ transform: translateX(-50%);
+ }
+
&::after {
position: absolute;
bottom: 0;
@@ -87,6 +111,16 @@ import { Container } from './container';
font-size: var(--font-lg);
font-weight: 600;
text-align: center;
+
+ & span {
+ background: linear-gradient(
+ 135deg,
+ var(--color-foreground),
+ var(--color-foreground-subtle)
+ );
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
}
& .desc {
diff --git a/src/helpers/binary.ts b/src/helpers/binary.ts
new file mode 100644
index 0000000..980cec1
--- /dev/null
+++ b/src/helpers/binary.ts
@@ -0,0 +1,9 @@
+export function generateRandomBinaryString(length: number) {
+ let binaryString = '';
+
+ for (let i = 0; i < length; i++) {
+ binaryString += Math.floor(Math.random() * 2);
+ }
+
+ return binaryString;
+}