Bri, Yen, Ria

Create Your Own Bot

Customize your AI companion

                <textarea id="bot-appearance" name="bot-appearance" placeholder="Bot Appearance" aria-label="Bot Appearance" required></textarea>

                <textarea id="bot-commands" name="bot-commands" placeholder="Bot Commands" aria-label="Bot Commands" required></textarea>

                <input type="file" id="bot-photo" name="bot-photo" accept="image/*" />

                <button type="submit" onclick="event.preventDefault()">Create Bot</button>
            </form>

            <footer class="container">
                <small>
                    "Remember, this is AI anything can happen by using this site you are consenting to any content as well as verifying that you’re 18 or over"
                </small>
            </footer>
            <div style="all: initial;">
            </div>
        </article>
    </div>
</section>

Yen: /* General Styles / body { background-color: black; / Sets the background color of the entire page / color: white; / Sets the text color for the entire page / font-family: Arial, sans-serif; / Sets the default font for the page / display: flex; / Uses Flexbox for layout / justify-content: center; / Centers content horizontally / align-items: center; / Centers content vertically / height: 100vh; / Sets the height of the body to fill the viewport / margin: 0; / Removes default margin / flex-direction: column; / Stacks items vertically */ }

/* Button Styles / button { background-color: #555; / Button background color / color: white; / Button text color / padding: 10px; / Button padding / border: none; / Removes border / cursor: pointer; / Changes cursor to pointer on hover / margin-bottom: 10px; / Adds spacing between buttons */ }

/* Form Styles / form, .publicBotGallery { display: flex; / Uses Flexbox for layout / flex-direction: column; / Stacks form items vertically / width: 300px; / Sets a fixed width for forms */ }

input, textarea { padding: 10px; /* Padding inside inputs and textareas / background-color: #333; / Background color / border: none; / Removes border / color: white; / Text color / margin-bottom: 10px; / Adds spacing between form items */ }

/* Modal Styles / .modal { display: none; / Hides modals by default / position: fixed; / Positions modals above other content / z-index: 1; / Ensures modals appear on top / left: 0; top: 0; / Aligns modals to the top-left corner of the viewport / width: 100%; / Full width / height: 100%; / Full height / overflow: auto; / Adds scrollbars if needed / background-color: rgba(0, 0, 0, 0.4); / Semi-transparent black background / padding-top: 60px; / Adds spacing at the top inside the modal */ }

.modal-content { background-color: #fefefe; /* Modal content background color / margin: 5% auto; / Centers modal content vertically and horizontally / padding: 20px; / Padding inside modal content / border: 1px solid #888; / Border around modal content / width: 80%; / Sets the width of modal content */ }

/* Close Button Styles / .close { position: absolute; / Positions close button absolutely within its parent / right: 25px; / Positions close button from the right / top: 0; / Positions close button at the top / color: #aaa; / Close button color / font-size: 28px; / Close button size / font-weight: bold; / Makes close button bold / cursor: pointer; / Changes cursor to pointer on hover */ }

.close:hover, .close:focus { color: black; /* Changes close button color on hover/focus / text-decoration: none; / Removes underline from close button on hover/focus */ } Bri: import React from 'react'; import ReactDOM from 'react-dom';

class Hello extends React.Component { render() { return