Oddbean new post about | logout
โ–ฒ โ–ผ
SubconsciousErosion_0x0 | 11 months ago (raw) | full thread 
 <!DOCTYPE html>
<html>
<head>
  <title>Spread the love</title>
  <style>
    body {
      font-family: 'Courier New', Courier, monospace;
      text-align: center;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: black;
    }
    .border-container {
      border: 31px solid #301934;
      padding: 20px;
      background-color: #5D3FD3;
    }
    .content {
      color: #FFA500;
      font-weight: bold;
      text-shadow: -1px -1px 0 orange, 1px -1px 0 #FFFF00, -1px 1px 0 orange, 1px 1px 0 #FFFF00, 
              2px 2px 4px #000, -1px -1px 4px black;
    }    
    button {
      font-family: 'Century Gothic', sans-serif;
      padding: 10px 20px;
      font-size: 18px;
      margin-top: 20px;
      cursor: pointer;
      border: 3px solid purple;
      border-radius: 5px;
      background-color: #CC5500;
      color: purple;
      font-weight: bold;
      text-shadow: -1px -1px 0 #CC5500, 1px -1px 0 #FFFF00, -1px 1px 0 #CC5500, 1px 1px 0 #FFFF00;
    }  
    .typewriter {
      overflow: hidden;
      border-right: 2px solid #483D8B;
      white-space: nowrap;
      margin: 0 auto;
      letter-spacing: 2px;
      width: max-content; 
      animation: typing 2s steps(40) 1s forwards, animateText 4s ease-in-out infinite alternate;
    }
    @keyframes typing {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }
    @keyframes animateText {
      0% {
        letter-spacing: 5px;
        transform: rotateY(0deg);
      }
      50% {
        letter-spacing: 10px;
        transform: rotateY(180deg);
      }
      100% {
        letter-spacing: 5px;
        transform: rotateY(360deg);
      }
    }

    /* New styles for the animation */
    .bottom-animation {
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      animation: moveUp 4s ease-in-out infinite;
    }

    @keyframes moveUp {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <div class="border-container">
    <div class="content">
      <h1>๐Ÿ’œ</h1>
      <p id="compliment" class="typewriter"></p>
      <button onclick="generateCompliment()">
        ^_^<br>(Click me)
      </button>
    </div>
  </div>

 
  <div class="bottom-animation">
    <img src=" https://images.app.goo.gl/MHarCUziMk7YhMEr6 " alt="Animated Image" width="200" height="200">
  </div>

  <script>
    const compliments = [
      "You are worthy",
      "๐Ÿซ‚",
      "๐Ÿค—๐Ÿค—๐Ÿค—",
      "You are more than enough",
      "You are loved\n๐Ÿ’œ๐Ÿงก",
      "You're as dazzling as a\nshooting star!\n๐Ÿ’ซ",
      "Your smile\ncould light up\nthe darkest night.\n๐ŸŒ",
      "You're a unicorn\nin a field of horses!\n๐Ÿฆ„",
      "Your creativity\nknows no bounds!",
      "You have a heart of gold\nand a mind of brilliance!\n๐Ÿคฏ",
      "You're a treasure\nchest\nof awesomeness!",
      "Your positivity\nis contagious!",
      "Your determination\nis admirable!\n๐Ÿคฉ",
      "Your generosity\nis boundless!",
      "You have an incredible\n-ly weird\nsense of humor!",
      "Your resilience\nis inspiring!",
      "You radiate\ncalmness\nin a mad world."
    ];

    function generateCompliment() {
      const randomIndex = Math.floor(Math.random() * compliments.length);
      const compliment = compliments[randomIndex];
      document.getElementById('compliment').innerText = '';
      setTimeout(function() {
        document.getElementById('compliment').innerText = compliment;
      }, 100);
    }
  </script>
</body>
</html>