<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="animated-art"></div>
</div>
<script>
// Recursive function to generate animated art
function generateArt(element, depth) {
if (depth === 0) return;
const art = document.createElement("div");
art.className = "animated-art";
element.appendChild(art);
generateArt(art, depth - 1);
}
// Call the function to generate the dynamic recursive inscription with animated art
const logo = document.getElementById("bitcoin-logo");
generateArt(logo, 5); // You can adjust the depth as needed.
</script>
<!DOCTYPE html>
<html>
<head>
<title>#Freeross Neon Sign with Matrix Effect</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #000;
overflow: hidden;
}
.neon-sign {
font-size: 50px;
font-family: "Arial", sans-serif;
text-transform: uppercase;
letter-spacing: 10px;
text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff8c00, 0 0 30px #ff8c00;
animation: flicker 1s infinite alternate;
color: #ff8c00;
}
@keyframes flicker {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.petition-button {
margin-top: 20px;
background-color: #ff8c00;
border: none;
color: #fff;
font-size: 24px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
.petition-button:hover {
background-color: #ff9933;
}
.matrix-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.matrix-text {
font-family: "Courier New", monospace;
font-size: 18px;
line-height: 20px;
color: #0f0;
position: absolute;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="matrix-container"></div>
<div class="neon-sign">#Freeross</div>
<a class="petition-button" href="https://www.change.org/p/clemency-for-ross-ulbricht-condemned-to-die-in-prison-for-an-e-commerce-website?hp" target="_blank">
Sign the Petition
</a>
<script>
const columns = 60;
const rows = 30;
const textSpeed = 50; // Adjust this to control the speed of falling characters
function createMatrixEffect() {
const container = document.querySelector(".matrix-container");
const chars = "!@#$%^&*()_+1234567890-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./<>?~QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM"; // Characters to be displayed
for (let i = 0; i < columns; i++) {
const column = document.createElement("div");
column.className = "matrix-text";
for (let j = 0; j < rows; j++) {
const char = document.createElement("span");
char.textContent = chars[Math.floor(Math.random() * chars.length)];
char.style.position = "absolute";
char.style.left = i * 20 + "px";
char.style.top = j * 20 + "px";
char.style.transition = "transform 0.1s";
char.style.transform = "translateY(-100%)";
column.appendChild(char);
}
container.appendChild(column);
}
const matrixTexts = document.querySelectorAll(".matrix-text");
let currentOffset = 0;
function updateTexts() {
currentOffset = (currentOffset + 1) % rows;
for (const text of matrixTexts) {
text.style.transform = `translateY(${currentOffset * 20}px)`;
}
setTimeout(updateTexts, textSpeed);
}
setTimeout(updateTexts, textSpeed);
}
createMatrixEffect();
const neonSign = document.querySelector(".neon-sign");
const colors = ["#ff8c00", "#ff9933"]; // Orange and a lighter shade of orange
let currentColorIndex = 0;
function changeColor() {
neonSign.style.textShadow = `0 0 10px #fff, 0 0 20px #fff, 0 0 30px ${colors[currentColorIndex]}`;
neonSign.style.color = colors[currentColorIndex];
currentColorIndex = (currentColorIndex + 1) % colors.length;
}
setInterval(changeColor, 1000); // Change color every 1 second
</script>
</body>
</html>