whoogle-search/app/templates/header.html

{% if mobile %}
    <header>
        <div class="bz1lBb">
            <form class="Pg70bf" id="search-form" method="POST">
                <a class="logo-link mobile-logo"
                   href="/"
                   style="display:flex; justify-content:center; align-items:center; color:#685e79; font-size:18px; ">
                    <span style="color: {{ 'var(--whoogle-dark-accent)' if config.dark else 'var(--whoogle-accent)' }} !important">Whoogle</span>
                </a>
                <div class="H0PQec" style="width: 100%;">
                    <div class="sbc esbc autocomplete">
                        <input id="search-bar" autocapitalize="none" autocomplete="off" class="noHIxc" name="q"
                               style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
                                       color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
                                       border: {{ '2px solid var(--whoogle-dark-accent)' if config.dark else '' }}; border-radius: 8px;"
                               spellcheck="false" type="text" value="{{ query }}">
                        <input name="tbm" value="{{ search_type }}" style="display: none">
                        <input type="submit" style="display: none;">
                        <div class="sc"></div>
                    </div>
                </div>
            </form>
        </div>
    </header>
{% else %}
    <header>
        <div class="logo-div">
            <a class="logo-link" href="/">
                <span style="color: {{ 'var(--whoogle-dark-accent)' if config.dark else 'var(--whoogle-accent)' }} !important">Whoogle</span>
            </a>
        </div>
        <div class="search-div">
            <form id="search-form" class="search-form" id="sf" method="POST">
                <div class="autocomplete" style="width: 100%; flex: 1">
                    <div style="width: 100%; display: flex">
                        <input id="search-bar" autocapitalize="none" autocomplete="off" class="noHIxc" name="q"
                               spellcheck="false" type="text" value="{{ query }}"
                               style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
                                       color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
                                       border: {{ '2px solid var(--whoogle-dark-accent)' if config.dark else '' }}; border-radius: 8px;">
                        <input name="tbm" value="{{ search_type }}" style="display: none">
                        <input type="submit" style="display: none;">
                        <div class="sc"></div>
                    </div>
                </div>
            </form>
        </div>
    </header>
{% endif %}

<script type="text/javascript" src="static/js/header.js"></script>