templates/navbar.html

<nav class="bg-white fixed w-full z-20 top-0 start-0 border-b border-gray-200">
    <div class="flex flex-wrap items-center justify-between mx-auto p-4">
        <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
            <img src="/static/img/Logo PNJ.png" class="h-8" alt="Politeknik Negeri Jakarta">
            <img src="/static/img/BLU SPEED LOGO.png" class="h-8" alt="Politeknik Negeri Jakarta">
            <img src="/static/img/Logo Kemendikbud.png" class="h-8" alt="Politeknik Negeri Jakarta">
            <img src="/static/img/Logo Kampus Merdeka.png" class="h-8" alt="Politeknik Negeri Jakarta">
            <img src="/static/img/Logo Vokasi Menguatkan.png" class="h-8" alt="Politeknik Negeri Jakarta">
        </a>
        <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
            <button data-collapse-toggle="navbar-sticky" type="button"
                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
                aria-controls="navbar-sticky" aria-expanded="false">
                <span class="sr-only">Open main menu</span>
                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 17 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M1 1h15M1 7h15M1 13h15" />
                </svg>
            </button>
        </div>
        <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1 ml-auto" id="navbar-sticky">
            <ul
                class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
                {% if current_user.is_authenticated %}
                <li>
                    {% if request.path == url_for('index') %}
                    <a href="/"
                        class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0"
                        aria-current="page">Home</a>
                    {% else %}
                    <a href="/"
                        class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0">Home</a>
                    {% endif %}
                </li>
                <li>
                    {% if request.path == url_for('history') %}
                    <a href="/history"
                        class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0"
                        aria-current="page">History</a>
                    {% else %}
                    <a href="/history"
                        class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0">History</a>
                    {% endif %}
                </li>
                <li>
                    <a href="/logout"
                        class="flex items-center gap-1 block py-2 px-3 text-red-600 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-red-700 md:p-0">
                        <svg class="block w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 16 16">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 8h11m0 0-4-4m4 4-4 4m-5 3H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h3" />
                        </svg>
                        <span>Logout</span>
                    </a>
                </li>
                {% else %}
                <li class="flex items-center">
                    <button class="me-2" data-popover-target="popover-description" data-popover-placement="bottom-end"
                        type="button"><svg class="w-7 h-7 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true"
                            fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg><span class="sr-only">Show information</span></button>
                    <div data-popover id="popover-description" role="tooltip"
                        class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-90">
                        <div class="p-3 space-y-2">
                            <h3 class="font-semibold text-gray-900">Main Features:</h3>
                            <ul class="max-w-md space-y-1 list-disc list-inside">
                                <li>Automatic Speech-to-Text Conversion</li>
                                <li>Manual Lyrics Input (in text format)</li>
                                <li>Lyrics Classification Based on Listener's Age</li>
                                <li>Probability Prediction for Each Age Category</li>
                                <li>Prediction History (available for logged-in users)</li>
                            </ul>
                            <a href="/login"
                                class="flex items-center font-medium text-blue-600 hover:text-blue-700 hover:underline">Login to save your prediction history <svg class="w-2 h-2 ms-1.5 rtl:rotate-180" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg></a>
                        </div>
                        <div data-popper-arrow></div>
                    </div>
                    <a href="/login"
                        class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center me-2">Login</a>
                    <a href="/register"
                        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center">Register</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>