Embed

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Interaktive Partikel</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
    }
    .content {
      position: relative;
      z-index: 1;
      color: #333;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div id="particles-js"></div>
  <div class="content">
    <h1>Willkommen bei der HG AGENTUR Challenge Seite </h1>
    <p>Interagiere mit dem Hintergrund! Das Spiel unten ist eine Challenge wer am meisten schafft Gewinnt eine Überraschung. Sende uns dein Screenshot mit deiner höchsten Zahl und wir schauen ob du die beste Person bist!</p>
  </div>

  
  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script>
    particlesJS("particles-js", {
      "particles": {
        "number": { "value": 80, "density": { "enable": true, "value_area": 800 } },
        "color": { "value": "#3498db" },
        "shape": {
          "type": "circle",
          "stroke": { "width": 0, "color": "#000000" },
        },
        "opacity": { "value": 0.5, "random": false },
        "size": { "value": 3, "random": true },
        "line_linked": { "enable": true, "distance": 150, "color": "#3498db", "opacity": 0.4, "width": 1 },
        "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": { "enable": true, "mode": "repulse" },
          "onclick": { "enable": true, "mode": "push" },
          "resize": true
        },
        "modes": {
          "repulse": { "distance": 100, "duration": 0.4 },
          "push": { "particles_nb": 4 }
        }
      },
      "retina_detect": true
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klicker-Spiel</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
        }
        .game-container {
            position: relative;
            text-align: center;
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            z-index: 1;
        }
        .score {
            font-size: 24px;
            color: #000;
            margin-bottom: 20px;
        }
        .click-button {
            font-size: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            background: #FF0000;
            color: #fff;
            cursor: pointer;
            transition: background 0.3s;
        }
        .click-button:hover {
            background: #cc0000;
        }
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #FF69B4, #00BFFF, #FFD700, #FF6347);
            background-size: 400% 400%;
            animation: gradientMove 10s ease infinite;
            z-index: 0;
        }
        @keyframes gradientMove {
            0% { background-position: 0% 0%; }
            50% { background-position: 100% 100%; }
            100% { background-position: 0% 0%; }
        }
    </style>
</head>
<body>
    <div class="background"></div>
    <div class="game-container">
        <div class="score">Punkte: <span id="score">0</span></div>
        <button class="click-button" onclick="increaseScore()">Klick mich!</button>
    </div>

    <script>
        let score = 0;

        function increaseScore() {
            score++;
            document.getElementById('score').innerText = score;
        }
    </script>
</body>
</html>