<h1 class="neon-text">Neon Vibes</h1>

<style>
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-text {
  font-size: 48px;
  color: #fff;
  text-shadow:
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff,
    0 0 80px #0ff;
  font-family: 'Courier New', monospace;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.4;
  }
}
</style>

<div class="hypno-loader"></div>

<style>
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.hypno-loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#0ff, #00f, #f0f, #0ff);
  animation: spin 2s linear infinite;
  mask-image: radial-gradient(circle, black 40%, transparent 41%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 41%);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<div id="party-zone"></div>

<style>
body {
  background: #111;
  margin: 0;
  overflow: hidden;
}

#party-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.emoji {
  position: absolute;
  font-size: 2rem;
  animation: float 5s linear infinite;
  user-select: none;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) rotate(720deg);
    opacity: 0;
  }
}
</style>

<script>
const zone = document.getElementById("party-zone");
const emojis = ["🎉", "🔥", "✨", "💻", "🧠", "🎵", "🚀", "👾"];

function spawnEmoji() {
  const emoji = document.createElement("div");
  emoji.classList.add("emoji");
  emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
  emoji.style.left = Math.random() * 100 + "vw";
  emoji.style.fontSize = Math.random() * 2 + 1 + "rem";
  emoji.style.animationDuration = Math.random() * 3 + 3 + "s";
  zone.appendChild(emoji);

  setTimeout(() => emoji.remove(), 6000);
}

setInterval(spawnEmoji, 200);
</script>

import { useState, useEffect } from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const word = "strawberrrrry";

  useEffect(() => {
    // Count the number of 'r's in the word
    const rCount = word.split('').filter(char => char === 'r').length;
    setCount(rCount);
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-200 via-red-100 to-purple-200 flex items-center justify-center p-4">
      <div className="max-w-sm w-full">
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden transform transition-all hover:scale-105 duration-300">
          <div className="p-6 text-center">
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-red-600 mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-8 h-8">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-gray-800 mb-2">Berry R Counter</h2>
            <p className="text-gray-600 mb-4">How many "r"s are in the word "{word}"?</p>
            
            <div className="bg-gradient-to-r from-pink-400 to-purple-400 rounded-xl p-6 mb-4 transform transition-all duration-500 hover:rotate-1">
              <div className="text-5xl font-extrabold text-white">{count}</div>
              <div className="text-white mt-1">R{count !== 1 ? 's' : ''} found!</div>
            </div>
            
            <button 
              onClick={() => window.location.reload()}
              className="mt-2 px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:from-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-300"
            >
              Try Again
            </button>
          </div>
          
          <div className="px-6 pb-6 pt-2 flex justify-center space-x-1">
            {[...Array(word.length)].map((_, i) => (
              <div 
                key={i}
                className={`w-3 h-3 rounded-full ${
                  word[i] === 'r' 
                    ? 'bg-red-500 animate-bounce' 
                    : 'bg-gray-300'
                }`}
                style={{ animationDelay: `${i * 100}ms` }}
              ></div>
            ))}
          </div>
        </div>
        
        <p className="mt-6 text-center text-sm text-gray-500">
          A cute little counter card for a berry interesting question 🍓
        </p>
      </div>
    </div>
  );
};

export default App;

<div class="neon-card">
  <h2>Html_codee</h2>
  <p>Bright ideas in glowing code!</p>
</div>

<style>
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.neon-card {
  padding: 2rem;
  border-radius: 15px;
  background: #111;
  color: #0ff;
  box-shadow: 0 0 10px #0ff, 0 0 40px #0ff;
  font-family: monospace;
  text-align: center;
  transition: 0.3s ease;
}

.neon-card:hover {
  box-shadow: 0 0 20px #0ff, 0 0 60px #0ff;
  transform: scale(1.05);
}
</style>

<h1 class="flicker">Html_codee Hacks</h1>

<style>
body {
  background: #000;
  color: #0f0;
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.flicker {
  font-size: 2.5rem;
  animation: flickerAnim 2s infinite;
}

@keyframes flickerAnim {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 22%, 24%, 55% {
    opacity: 0.1;
  }
}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TRX Wallet Creator</title>
  <script src="https://cdn.jsdelivr.net/npm/tronweb/dist/TronWeb.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #0b0c10;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
    }
    .wallet-box {
      background: #1f2833;
      padding: 20px;
      border-radius: 10px;
      width: 100%;
      max-width: 500px;
      box-shadow: 0 0 10px #45a29e;
    }
    button {
      background: #66fcf1;
      border: none;
      color: #0b0c10;
      padding: 10px 20px;
      margin: 10px 0;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
    }
    input {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      background: #0b0c10;
      color: #66fcf1;
      border: 1px solid #66fcf1;
      border-radius: 5px;
      font-family: monospace;
    }
    label {
      margin-top: 15px;
      display: block;
    }
  </style>
</head>
<body>

  <h1>🚀 TRX Wallet Creator</h1>
  <div class="wallet-box">
    <button onclick="generateWallet()">Generate New Wallet</button>

    <label>TRX Address:
      <input type="text" id="address" readonly>
    </label>

    <label>Private Key:
      <input type="text" id="privateKey" readonly>
    </label>

    <label>Public Key:
      <input type="text" id="publicKey" readonly>
    </label>

    <button onclick="copyAll()">📋 Copy All</button>
  </div>

  <script>
    async function generateWallet() {
      const tronWeb = new TronWeb({
        fullHost: 'https://api.trongrid.io'
      });

      const account = await tronWeb.createAccount();

      document.getElementById("address").value = account.address.base58;
      document.getElementById("privateKey").value = account.privateKey;
      document.getElementById("publicKey").value = account.publicKey;
    }

    function copyAll() {
      const text = `
TRX Address: ${document.getElementById("address").value}
Private Key: ${document.getElementById("privateKey").value}
Public Key: ${document.getElementById("publicKey").value}
      `.trim();

      navigator.clipboard.writeText(text).then(() => {
        alert("Copied to clipboard!");
      });
    }
  </script>
</body>
</html>

<button class="pulse-button">Start Game</button>

<style>
body {
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.pulse-button {
  background: #28a745;
  color: white;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(40, 167, 69, 0.7);
  animation: pulse 2s infinite;
  transition: 0.3s ease;
}

.pulse-button:hover {
  box-shadow: 0 0 15px #28a745, 0 0 30px #28a745;
  transform: scale(1.05);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}
</style>