I want to make a system,but I need help

[HasanMahmud90]

Hello WHMCS team and users,Take by greetings.Actuslly I want to show the Hosting account information for clients products,the design in very cool.I wll provide the screenshot.I want to make the code i provided design to the picture i provided.Please help me to make this design

 

/* JavaScript to handle toggle password visibility and copy functionality. */
add_hook('ClientAreaHeadOutput', 1, function($vars) {
    return '
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        document.body.addEventListener("click", function(event) {
            if (event.target.classList.contains("toggle-password")) {
                var passwordDisplay = document.getElementById("password-display");
                var actualPassword = event.target.getAttribute("data-password");
                var copyButton = document.querySelector(".copy-password");
                
                if (passwordDisplay.textContent === actualPassword) {
                    passwordDisplay.textContent = "*".repeat(actualPassword.length);
                    event.target.classList.remove("fa-eye-slash");
                    event.target.classList.add("fa-eye");
                    copyButton.style.display = "none";
                } else {
                    passwordDisplay.textContent = actualPassword;
                    event.target.classList.remove("fa-eye");
                    event.target.classList.add("fa-eye-slash");
                    copyButton.style.display = "inline-block";
                    copyButton.setAttribute("data-copy-text", actualPassword); // Set the password to be copied
                }
            }

            /* Handle copy button clicks */
            if (event.target.classList.contains("copy-username") ||
                event.target.classList.contains("copy-ip") ||
                event.target.classList.contains("copy-nameserver1") ||

 

Make it like the picture.In header there will show domain name and cpanel logo,and if anyone click on header,redirect it to cpanel login page

 

[HasanMahmud90]

Main code

 

<?php
use WHMCS\View\Menu\Item as MenuItem;
use Illuminate\Database\Capsule\Manager as Capsule;

/* Add credentials to the end of all secondary sidebars. */
add_hook('ClientAreaSecondarySidebar', 1, function (MenuItem $secondarySidebar) {
    /* Get the credentials. */
    $service = Menu::context('service');
    $username = $service->username;
    $serverid = $service->server;
    $domain = $service->domain;
    $password = decrypt($service->password);
    
    $serverDetails = Capsule::table('tblservers')->where('id', $serverid)->first(['hostname', 'ipaddress', 'nameserver1', 'nameserver2']);

    /* If the username isn't empty let's show them! */
    if (!empty($username)) {
        /* Add a panel to the end of the secondary sidebar for credentials. */
        $secondarySidebar->addChild('credentials', [
            'label' => 'Hosting Information',
            'uri' => '#',
            'icon' => 'fa-desktop',
        ]);

        /* Retrieve the panel we just created. */
        $credentialPanel = $secondarySidebar->getChild('credentials');
        $credentialPanel->moveToBack();

        /* Show the username with a copy icon. */
        $credentialPanel->addChild('username', [
            'label' => '<span id="username-display">' . $username . '</span>
                        <button class="btn btn-sm btn-outline-secondary copy-username" data-copy-text="' . $username . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>',
            'order' => 1,
            'icon' => 'fas fa-user-check',
        ]);

        /* Show the password with toggle icon and copy button. */
        $credentialPanel->addChild('password', [
            'label' => '<span id="password-display" style="margin-right: 10px;">' . str_repeat('*', strlen($password)) . '</span>
                        <i class="fas fa-shield-alt fa-lg toggle-password" data-password="' . addslashes($password) . '"></i>
                        <button class="btn btn-sm btn-outline-secondary copy-password" data-copy-text="' . addslashes($password) . '" style="display:none; padding: 2px 8px; margin-left: 5px;">Copy</button>',
            'order' => 2,
            'icon' => 'fa-key',
        ]);

        /* Show the domain. */
        $credentialPanel->addChild('domain', [
            'label' => $domain,
            'order' => 3,
            'icon' => 'fas fa-globe-americas',
        ]);

        /* Show the server IP with a copy icon. */
        $credentialPanel->addChild('ip', [
            'label' => '<span id="ip-display">' . $serverDetails->ipaddress . '</span>
                        <button class="btn btn-sm btn-outline-secondary copy-ip" data-copy-text="' . $serverDetails->ipaddress . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>',
            'order' => 4,
            'icon' => 'fas fa-map-marker-alt',
        ]);

        /* Show the server name. */
        $credentialPanel->addChild('server', [
            'label' => $serverDetails->hostname,
            'order' => 5,
            'icon' => 'fa-server',
        ]);

        /* Show nameserver 1 with a copy icon. */
        $credentialPanel->addChild('nameserver1', [
            'label' => '<span id="nameserver1-display">' . $serverDetails->nameserver1 . '</span>
                        <button class="btn btn-sm btn-outline-secondary copy-nameserver1" data-copy-text="' . $serverDetails->nameserver1 . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>',
            'order' => 6,
            'icon' => 'fas fa-link',
        ]);

        /* Show nameserver 2 with a copy icon. */
        $credentialPanel->addChild('nameserver2', [
            'label' => '<span id="nameserver2-display">' . $serverDetails->nameserver2 . '</span>
                        <button class="btn btn-sm btn-outline-secondary copy-nameserver2" data-copy-text="' . $serverDetails->nameserver2 . '" style="padding: 2px 8px; margin-left: 10px;">Copy</button>',
            'order' => 7,
            'icon' => 'fas fa-link',
        ]);
    }
});

/* JavaScript to handle toggle password visibility and copy functionality. */
add_hook('ClientAreaHeadOutput', 1, function($vars) {
    return '
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        document.body.addEventListener("click", function(event) {
            if (event.target.classList.contains("toggle-password")) {
                var passwordDisplay = document.getElementById("password-display");
                var actualPassword = event.target.getAttribute("data-password");
                var copyButton = document.querySelector(".copy-password");

                if (passwordDisplay.textContent === actualPassword) {
                    passwordDisplay.textContent = "*".repeat(actualPassword.length);
                    event.target.classList.remove("fa-eye-slash");
                    event.target.classList.add("fa-eye");
                    copyButton.style.display = "none";
                } else {
                    passwordDisplay.textContent = actualPassword;
                    event.target.classList.remove("fa-eye");
                    event.target.classList.add("fa-eye-slash");
                    copyButton.style.display = "inline-block";
                }
            }

            /* Handle copy button clicks */
            if (event.target.classList.contains("copy-username") ||
                event.target.classList.contains("copy-ip") ||
                event.target.classList.contains("copy-nameserver1") ||
                event.target.classList.contains("copy-nameserver2") ||
                event.target.classList.contains("copy-password")) {

                var copyText = event.target.getAttribute("data-copy-text");

                /* Create a temporary textarea to copy the text. */
                var tempInput = document.createElement("textarea");
                tempInput.style.position = "absolute";
                tempInput.style.left = "-9999px";
                tempInput.style.top = "0";
                tempInput.value = copyText;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand("copy");
                document.body.removeChild(tempInput);

                /* Optionally provide visual feedback */
                event.target.textContent = "Copied!";
                setTimeout(function() {
                    event.target.textContent = "Copy";
                }, 2000);
            }
        });
    });
    </script>';
});
?>