OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	11/28/2024 11:03:35 AM	rwxrwxr-x
📄 article.php	997 bytes	05/19/2024 04:03:54 PM	rw-r--r--
📄 atri.php	6.15 KB	05/16/2024 03:58:00 AM	rw-r--r--
📄 bgenai_save.php	2.13 KB	06/22/2024 11:54:40 AM	rw-r--r--
📄 bizx.php	6.25 KB	05/16/2024 03:58:11 AM	rw-r--r--
📄 bprocess_genai.php	17.32 KB	08/22/2024 06:42:55 AM	rw-r--r--
📄 casudhi.php	6.59 KB	06/10/2024 05:09:43 AM	rw-r--r--
📄 creamai.php	12.81 KB	06/05/2024 11:58:31 PM	rw-r--r--
📄 gen2 copy.php	13.89 KB	05/21/2024 01:25:56 AM	rw-r--r--
📄 gen2.php	17.74 KB	06/12/2024 10:34:13 AM	rw-r--r--
📄 gen2_1.php	29.92 KB	06/15/2024 04:21:20 AM	rw-r--r--
📄 gen2_1_1.php	30.24 KB	06/14/2024 07:42:54 AM	rw-r--r--
📄 gen2_without_copytext.php	12.1 KB	05/19/2024 03:17:36 AM	rw-r--r--
📄 genai_article_save.php	1.6 KB	09/17/2024 07:46:25 AM	rw-r--r--
📄 genai_function.php	17.26 KB	09/17/2024 07:45:48 AM	rw-r--r--
📄 genai_save.php	2.13 KB	09/17/2024 07:45:57 AM	rw-r--r--
📄 gencv.php	6.84 KB	08/04/2024 12:04:57 PM	rw-r--r--
📄 gengraf.php	6.79 KB	05/18/2024 09:59:45 AM	rw-r--r--
📄 iamlucky.php	2.57 KB	05/09/2024 12:44:10 PM	rw-r--r--
📁 images	-	06/10/2024 05:06:33 AM	rwxr-xr-x
📄 index.html	3.9 KB	05/09/2024 06:09:07 AM	rw-rw-r--
📄 my_tts.sh	327 bytes	05/09/2024 10:11:32 AM	rwxrwxrwx
📄 netra.php	6.1 KB	05/16/2024 03:57:29 AM	rw-r--r--
📄 oai.sh	619 bytes	05/09/2024 10:37:43 AM	rw-r--r--
📄 old_gen2.php	13.54 KB	05/22/2024 02:35:21 PM	rw-r--r--
📄 old_genai_save.php	1.32 KB	05/22/2024 02:06:04 PM	rw-r--r--
📄 old_process_genai.php	5.77 KB	06/22/2024 04:08:45 AM	rw-r--r--
📄 process_genai.php	2.02 KB	09/17/2024 07:46:13 AM	rw-r--r--
📄 result.html	541 bytes	05/09/2024 06:09:07 AM	rw-rw-r--
📄 speech.mp3	67.97 KB	05/09/2024 10:30:50 AM	rw-r--r--
📄 submit_handler.php	2.78 KB	05/09/2024 11:53:47 AM	rw-r--r--
📁 team	-	05/21/2024 09:32:43 AM	rwxr-xr-x
📁 venv	-	05/09/2024 07:06:18 AM	rwxr-xr-x

Editing: gen2_1_1.php

<?php
// Start or resume the session
session_start();
include '.../inc/validate.logged.php';
include '.../inc/config.php'; 
// include 'inc/validate.logged.php';
// include 'inc/config.php';

// Define system prompts for various scenarios
$system_prompts = array(
    "#todo" => "Convert the text that follows as a todo item.",
    "#post" => "Convert the text that follows as a social post.",
    "#joke" => "use text as a context or theme to write a joke.",
    "#note" => "Convert the text that follows as a note.",
    "#bored" => "Respond with a motivational anecdote especially from among Robin Williams, Emerson, Mark Twain, Jim Rohn, Dale Carnegie, Simon Sinek",
    "#advise" => "Take the following text to give me advise with anecdotes on how it was done by someone else.",
    "#done" => "Congratulate me and make me feel on top of the world.",
    "#working" => "help me keep my focus on the current work.",
    "#continue" => "Answer within the context of : " . end($_SESSION),
    "#tran-ek" => "Convert the text that follows into Kannada language",
    "#tran-ke" => "Convert the text in kannada that follows into English language",
    "#reporter" => "Convert the text that follows as a newspaper report",
    "#ben" => "Respond like you are Ben Franklin, picking from your writings and thoughts and motivating and guiding.",
    "#list" => "Respond with html entities that can be rendered directly without postprocessing. Add a html break entity after each item."
);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Clear the generated content if the "Clear" button is clicked
    if (isset($_SESSION['working_headline'])) {
        $working_headline = $_SESSION['working_headline'];
    } else {
        $working_headline = '';
    }
    if (isset($_POST['clear'])) {
        unset($_SESSION['working_headline']);

// Redirect back to the same page to clear the displayed content
        header("Location: {$_SERVER['REQUEST_URI']}");
        exit();
    }
    if (isset($_POST['reset'])) {
        if (isset($_SESSION['working_headline'])) {
            unset($_SESSION['working_headline']);
        }
        if (isset($_SESSION['generated_content'])) {
            unset($_SESSION['generated_content']);
        }

// Redirect back to the same page to clear the displayed content
        header("Location: {$_SERVER['REQUEST_URI']}");
        exit();
    }
    // Generate new content if the form is submitted
    else {
        // Get form data
        $working_headline = $_POST["working_headline"];
        $num_words = 500;
        // Set your API key
        $apiKey = "sk-proj-FrlWqCTIyid7DZGorv0uT3BlbkFJzqrUB0km57kpp4aFPNV7";

// Set the endpoint URL for chat completions
        $url = "https://api.openai.com/v1/chat/completions";

// Preprocess system prompts
        $system_prompt = "";
        foreach ($system_prompts as $trigger => $response) {
            if (strpos($working_headline, $trigger) === 0) {
                $system_prompt = "System: " . $response;
                // Remove the trigger from the input
                $working_headline = substr($working_headline, strlen($trigger));
                break;
            }
        }

// Set the request data with a chat-based model and messages parameter
        $data = array(
            "model" => "gpt-3.5-turbo",
            "messages" => array(
                array(
                    "role" => "system",
                    "content" => "System: Try to complete the sentence even if the max_tokens is reached."
                ),
                array(
                    "role" => "system",
                    "content" => "System: Always use mysql compatible svg embeds to show icons or images if you are using them to pepper the response."
                ),
                array(
                    "role" => "system",
                    "content" => $system_prompt
                ),
                array(
                    "role" => "user",
                    "content" => "You: $working_headline."
                )
            ),
            "max_tokens" => $num_words
        );

// Initialize cURL
        $ch = curl_init();

// Set cURL options
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        curl_setopt($ch, CURLOPT_HTTPHEADER, array(
            "Content-Type: application/json",
            "Authorization: Bearer $apiKey"
        ));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// Execute the request
        $response = curl_exec($ch);

// Close cURL
        curl_close($ch);

// Decode JSON response
        $result = json_decode($response, true);

// Extract the total_tokens
        $totalTokens = $result['usage']['total_tokens'];

// Get the generated content
        $new_content = $result['choices'][0]['message']['content'];

// Append the new content to the existing content
        if (!isset($_SESSION['generated_content'])) {
            $_SESSION['generated_content'] = "";
        }
        $_SESSION['generated_content'] .= "<br><br>" . $new_content;
    }
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knobly Cream GenAI</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <link rel="stylesheet" href="inc/fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="inc/magnific-popup.css" />
    <link rel="stylesheet" href="/inc/style.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.tiny.cloud/1/u5oz235qw5jiqww4udm90ocp9zg2rncblqo2ch0ym3twjgyt/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="https://js.zohostatic.com/books/zfwidgets/assets/js/zf-widget.js"></script>
    <script src="/inc/jquery.magnific-popup.min.js"></script>
    <script src="/inc/common.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#panelContent').load('process/get.section.curated.php', function() {
                $('#contentLoader').hide()
            });
        });
    </script>

.content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

.footer {
            background-color: #f8f9fa;
            text-align: center;
            padding: 10px 0;
            position: relative;
            width: 100%;
            bottom: 0;
        }

.tips-button {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 0.9rem;
            color: #007bff;
            cursor: pointer;
            z-index: 10;
        }

.modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

.modal-content {
            background-color: #f9f9f9;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 10px;
        }

.close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

.close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

.tips-content {
            font-size: 0.9rem;
            color: #333;
        }

@media (max-width: 768px) {
            .tips-button {
                top: 50px;
                right: 10px;
                font-size: 0.8rem;
            }

.container {
                text-align: center;
            }

header img {
                max-width: 150px;
                margin-bottom: 20px;
            }
        }

/* New styles for the generated content area */
        .generated-content {
            max-height: 300px;
            /* Adjust as needed */
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }

.lead {
            font-size: 16px;
        }

.copy-button {
            background-color: transparent;
            border: 1px solid #007bff;
            color: #007bff;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.8rem;
        }

.copy-button:hover {
            background-color: #ffffff;
            color: white;
        }

/* css for dropdown */
        /* Style the dropdown container */
        .dropdown {
            position: relative;
            display: inline-block;
        }

/* Style the button that will trigger the dropdown */
        .dropdown-button {
            background-color: #f26522;
            border-radius: 5px;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

/* Style the dropdown content (hidden by default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            max-height: 200px;
            /* Maximum height of dropdown content */
            overflow-y: auto;
            /* Enable vertical scrollbar if content exceeds max-height */
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

/* Style the links inside the dropdown */
        .dropdown-content option {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

/* Change color of dropdown links on hover */
        .dropdown-content option:hover {
            background-color: #f1f1f1;
        }

/* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

.classReset:hover {
            background-color: #cb2626;
        }

.button-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            align-items: center;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

.button-container button {
            display: grid;
            border: 1px solid black;
            border-radius: 2px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            outline: none;
        }

.button-container button .dropdown-icon {
            margin-right: 5px;
        }

.main-container {
            display: flex;
            flex: auto;
        }

.clear-text {
            opacity: 0;
            /* Initially hide the text */
            transition: opacity 0.3s ease;
            /* Add transition effect */
        }

.button-bar {

display: flex;
            justify-content: space-between;
        }

.gen3 {
            background-color: #f26522;
            border: 1px #f26522;
            /* border-radius: 2px; */
        }

.gen3:hover {
            background-color: #CF551D;
            border: 1px #CF551D;
            /* border-radius: 2px; */
        }
        .button-bar {
            width: 100%;

/* top: 0; */
            overflow-x: hidden;
            padding-top: 20px;
        }

.left {
            display: flex;
            justify-content: space-between;
            width: 50%;
            left: 0;
            /* background-color: #111; */
        }

/* Control the right side */
        .right {
            right: 0;
            /* background-color: red; */
        }
    </style>
</head>

<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
        <a class="navbar-brand" href="dashboard.php"><img src="/grfx/logo.png" width="120"></a>
        <button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button>
        <div class="navbar-nav ml-auto">
            <div class="navbar-nav text-light" style="margin-top:6px;margin-right:20px"><?= strtok($gUserName, " "); ?></div>
            <div class="navbar-nav text-light" style="margin-top:6px;margin-right:20px"><? if ($gUserPlan == 1) { ?>Pro<? } else { ?>Free<? } ?></div>
            <div class="navbar-nav text-light cursorH" style="margin-top:10px;margin-right:10px" onclick="goSection('utils','','showNotifications')"><i class="fas fa-bell"></i></div>
            <ul class="navbar-nav ml-md-0">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown"><i class="fas fa-user fa-fw"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="javascript:goSection('account')">My Account</a>
                        <a class="dropdown-item" href="javascript:goSection('settings')">My Settings</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="process/logout.php" onclick="removeSignedIn()">Logout</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

<div id="layoutSidenav">
        <div id="layoutSidenav_nav">
            <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                <div class="sb-sidenav-menu">
                    <div class="nav mt-4">
                        
                        <a class="nav-link" href="javascript:np()" onclick="goSection('curated', this)">
                            <div class="sb-nav-link-icon"><i class="fas fa-rss"></i></div> Cream Curated
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('feed', this)">
                            <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div> My Feeds
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('collection', this)">
                            <div class="sb-nav-link-icon"><i class="fas fa-save"></i></div> My Collections
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('community', this)">
                            <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div> Community Feeds(Beta)
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('team', this)">
                            <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div> Our Team(Beta)
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('create', this)">
                            <div class="sb-nav-link-icon"><i class="fa fa-plus"></i></div> Create
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('newsletter', this)">
                            <div class="sb-nav-link-icon"><i class="fas fa-newspaper"></i></div> Newsletter
                        </a>
                        <a class="nav-link" href="https://knoblycream.com/sendy" target=_blank>
                            <div class="sb-nav-link-icon"><i class="fa-solid fa-paper-plane"></i></div> Mailer Campaign
                        </a>
                        <a class="nav-link" href="https://knoblycream.com/genai/gen2.php" target=_blank>
                            <div class="sb-nav-link-icon"><i class="fa fa-rocket"></i></div> GenAI Creator
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('request.article', this)">
                            <div class="sb-nav-link-icon"><i class="far fa-map"></i></div> Request Article
                        </a>
                        <a class="nav-link" href="javascript:np()" onclick="goSection('analytics', this)">
                            <div class="sb-nav-link-icon"><i class="fa fa-chart-line"></i></div> Analytics
                        </a>
                    </div>
                </div>
                <div class="sb-sidenav-footer">
                    <div class="small">Version: 2.1</div>
                </div>
            </nav>
        </div>

<div id="layoutSidenav_content">
            <main>
                
                <div class="main-container">

<button class="dropdown-option" value="#bored" title="Respond with a motivational anecdote especially from among Robin Williams, Emerson, Mark Twain, Jim Rohn, Dale Carnegie, Simon Sinek">
                                        <i class="fas fa-grin-squint-tears dropdown-icon"></i> Bored
                                    </button>
                                    <button class="dropdown-option" value="#advise" title="Take the following text to give me advise with anecdotes on how it was done by someone else.">
                                        <i class="fas fa-comment-alt dropdown-icon"></i> Advise
                                    </button>
                                    <button class="dropdown-option" value="#done" title="Congratulate me and make me feel on top of the world.">
                                        <i class="fas fa-check-circle dropdown-icon"></i> Done
                                    </button>
                                    <button class="dropdown-option" value="#working" title="help me keep my focus on the current work.">
                                        <i class="fas fa-tools dropdown-icon"></i> Working
                                    </button>
                                    <button class="dropdown-option" value="#continue" title="Answer within the context of :">
                                        <i class="fas fa-arrow-right dropdown-icon"></i> Continue
                                    </button>
                                    <button class="dropdown-option" value="#ben" title="Respond like you are Ben Franklin, picking from your writings and thoughts and motivating and guiding.">
                                        <i class="fas fa-user dropdown-icon"></i> Ben
                                    </button>

</div>
                                <div class=" gen3-button right">
                                    <a href="/genai/gen2_1.php"><button class="btn btn-primary gen3">Back to GenAI</button></a>

</div>
                            </div>

<form method="post" action="">
                                <div class="form-group" style="margin-top:1rem">
                                    
                                    <textarea name="working_headline" placeholder="Start your conversation..." id="working_headline" class="form-control" rows="2"><?php if (isset($_POST['working_headline'])) echo htmlspecialchars($_POST['working_headline']); ?></textarea>
                                </div>
                                <div class="form-group flex space-between">
                                    <button type="submit" class="btn btn-primary">Generate</button>
                                    <button type="submit" name="clear" class="btn btn-secondary"><i class="fas fa-eraser"></i> Clear</button>
                                    <button type="submit" name="reset" class="float-right btn btn-secondary classReset"><i class="fas fa-trash-alt"></i> Reset</i></button>
                                </div>
                            </form>

<?php if (isset($_SESSION['generated_content']) && !empty($_SESSION['generated_content'])) : ?>
                                <div class="generated-content bg-white p-3 mt-3">
                                    <h5>Generated Content:</h5>
                                    <p><?php echo $_SESSION['generated_content']; ?></p>
                                    <button onclick="copyText()" class="float-left btn btn-warning ">Copy</button>
                                    <form method="post" action='genai_save.php'>
                                        <input type="hidden" name="generated_content" value="<?php echo $_SESSION['generated_content']; ?>" />
                                        <input type="hidden" name="working_headline" value="<?php echo $working_headline; ?>" />
                                        <input class="float-right btn btn-primary" type="submit" value="Save">
                                    </form>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <footer class="footer" style="bottom: 1 px; position:relative">
        <div class="container">
            <span class="text-muted">&copy; 2023 Knobly Cream. All rights reserved.</span>
            <span id="tipsButton" class="tips-button">Need Tips?</span>
        </div>
    </footer>

<div id="tipsModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="tips-content">
                <h5>Tips for Using Knobly Cream:</h5>
                <p><strong>#todo:</strong> Convert the text that follows as a todo item.</p>
                <p><strong>#post:</strong> Convert the text that follows as a social post.</p>
                <p><strong>#joke:</strong> use text as a context or theme to write a joke.</p>
                <p><strong>#note:</strong> Convert the text that follows as a note.</p>
                <p><strong>#bored:</strong> Respond with a motivational anecdote especially from among Robin Williams, Emerson, Mark Twain, Jim Rohn, Dale Carnegie, Simon Sinek</p>
                <p><strong>#advise:</strong> Take the following text to give me advise with anecdotes on how it was done by someone else.</p>
                <p><strong>#done:</strong> Congratulate me and make me feel on top of the world.</p>
                <p><strong>#working:</strong> help me keep my focus on the current work.</p>
                <p><strong>#continue:</strong> Answer within the context of : [Last Session Entry]</p>
                <p><strong>#tran-ek:</strong> Convert the text that follows into Kannada language</p>
                <p><strong>#tran-ke:</strong> Convert the text in kannada that follows into English language</p>
                <p><strong>#reporter:</strong> Convert the text that follows as a newspaper report</p>
                <p><strong>#ben:</strong> Respond like you are Ben Franklin, picking from your writings and thoughts and motivating and guiding.</p>
                <p><strong>#list:</strong> Respond with html entities that can be rendered directly without postprocessing. Add a html break entity after each item.</p>
            </div>
        </div>
    </div>

// JavaScript to handle the modal
        var modal = document.getElementById("tipsModal");
        var btn = document.getElementById("tipsButton");
        var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
            modal.style.display = "block";
        }

span.onclick = function() {
            modal.style.display = "none";
        }

window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
    
    <script>
        // Get the dropdown content element
        var dropdownContent = document.querySelector('.dropdown-content');

// Get the text area element
        var textArea = document.getElementById('working_headline');

// Add click event listener to the dropdown content
        dropdownContent.addEventListener('click', function(event) {
            // Check if clicked element is an option
            if (event.target.tagName === 'OPTION') {
                // Append the value of the selected option to the text area
                textArea.value += event.target.value;
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var dropdownOptions = document.querySelectorAll('.dropdown-content option');

dropdownOptions.forEach(function(option) {
                option.addEventListener('click', function() {
                    var dropdownContent = this.parentNode;
                    dropdownContent.style.display = 'none';
                });
            });

var dropdownButton = document.querySelector('.dropdown-button');
            var dropdownContent = document.querySelector('.dropdown-content');
            var textBox = document.getElementById('avatar-textbox');

dropdownButton.addEventListener('click', function() {
                dropdownContent.style.display = (dropdownContent.style.display === 'block') ? 'none' : 'block';
            });
        });
    </script>

dropdownOptions.forEach(function(option) {
                option.addEventListener('click', function() {
                    var textArea = document.getElementById('working_headline');
                    textArea.value += this.getAttribute('value'); // Append the value of the clicked option

// Hide the dropdown content after selecting an option
                    dropdownContent.style.display = 'none';
                });
            });

var dropdownButton = document.querySelector('.dropdown-button');

dropdownButton.addEventListener('click', function() {
                dropdownContent.style.display = 'block';
            });
        });
    </script>

</body>

</html>