Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hacker Style Frontend</title>

    <style>
        /* Your existing styles */
        body {
            font-family: 'Courier New', Courier, monospace;
            background-color: #000;
            color: #0F0;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        header {
            text-align: center;
            padding: 20px 0;
        }

        nav {
            text-align: center;
            margin-top: 20px;
        }

        nav a {
            color: #0F0;
            text-decoration: none;
            padding: 10px 20px;
            border: 1px solid #0F0;
            margin: 0 5px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        nav a:hover {
            background-color: #0F0;
            color: #000;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .button {
            display: inline-block;
            background-color: #0F0;
            color: #000;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .button:hover {
            background-color: #000;
            color: #0F0;
        }

        #dynamic-content {
            margin-top: 20px;
        }

        /* Additional style for Particle.js container */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            z-index: -1; /* Ensure it's behind other content */
        }
    </style>
</head>
<body>

    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

<!-- Particle.js container -->
<div id="particles-js"></div>

<header>
    <img src="eleenlogo.png" alt="brandlogo" style="width:400px;height:150px;" style="margin-left: 400px;">
</header>

<body>
    <div class="vertical-align">
      <!-- Person selector: this contains buttons for user to select whether to chat as John or Jane -->
      <div class="person-selector">
      </div>
      <div class="chat-container">


        <form class="chat-input-form">
          <input type="text" class="chat-input" required placeholder="Type here, John..." />
          <button type="submit" class="button send-button">Send</button>
        </form>
        <!-- Add a button for recording voice -->
        <button id="recordButton" class="button">Record Voice</button>
      </div>
    </div>

    <script src="app.js"></script>
    <script>
        // Function to handle recording of voice
        function startRecording() {
            const recognition = new webkitSpeechRecognition();
            recognition.lang = 'en-US';
            recognition.start();

            recognition.onresult = function(event) {
                const result = event.results[0][0].transcript;
                // Do something with the recorded voice input, for example:
                document.querySelector('.chat-input').value = result;
            }

            recognition.onerror = function(event) {
                console.error(event.error);
            }
        }

        // Event listener for the record button
        document.getElementById('recordButton').addEventListener('click', function() {
            startRecording();
        });
    </script>
  </body>


<!-- Include Particle.js library -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<!-- Include your JSON configuration file -->
<script>
    // Configuration for Particle.js
    var particlesConfig = {
        "particles": {
            "number": {
                "value": 100,
                "density": {
                    "enable": true,
                    "value_area": 800
                }
            },
            "color": {
                "value": "#9acc14"
            },
            "shape": {
                "type": "circle",
                "stroke": {
                    "width": 0,
                    "color": "#000000"
                },
                "polygon": {
                    "nb_sides": 5
                },
                "image": {
                    "src": "img/github.svg",
                    "width": 100,
                    "height": 100
                }
            },
            "opacity": {
                "value": 0.5,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 0.5,
                    "opacity_min": 0.1,
                    "sync": false
                }
            },
            "size": {
                "value": 1,
                "random": true,
                "anim": {
                    "enable": false,
                    "speed": 40,
                    "size_min": 0.1,
                    "sync": false
                }
            },
            "line_linked": {
                "enable": true,
                "distance": 150,
                "color": "#9acc14",
                "opacity": 0.4,
                "width": 1
            },
            "move": {
                "enable": true,
                "speed": 3,
                "direction": "right",
                "random": false,
                "straight": false,
                "out_mode": "out",
                "bounce": false,
                "attract": {
                    "enable": false,
                    "rotateX": 600,
                    "rotateY": 1200
                }
            }
        },
        "interactivity": {
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                },
                "onclick": {
                    "enable": true,
                    "mode": "push"
                },
                "resize": true
            },
            "modes": {
                "grab": {
                    "distance": 10,
                    "line_linked": {
                        "opacity": 1
                    }
                },
                "bubble": {
                    "distance": 10,
                    "size": 40,
                    "duration": 2,
                    "opacity": 8,
                    "speed": 3
                },
                "repulse": {
                    "distance": 100,
                    "duration": 0.4
                },
                "push": {
                    "particles_nb": 4
                },
                "remove": {
                    "particles_nb": 2
                }
            }
        },
        "retina_detect": true
    };

    // Initialize Particle.js with your configuration
    particlesJS('particles-js', particlesConfig);
</script>

</body>
</html>