source: templates/preferences.html@ e6c1c76

<!DOCTYPE html>
<html lang="mk">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Мои преференции | BiblioPremium</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

<body>

<header class="navbar">

    <div class="logo">
        <img src="{{ url_for('static', filename='images/logo.png') }}"
             alt="BiblioPremium">
    </div>

    <nav>

        <a href="{{ url_for('home') }}">
            Почетна
        </a>

        <a href="{{ url_for('home') }}#books">
            Книги
        </a>

        <a href="{{ url_for('recommendations') }}">
            Препораки
        </a>

        {% if session.get('korisnik_id') %}

            <a href="{{ url_for('favorites') }}">
                Омилени
            </a>

            <a href="{{ url_for('orders') }}">
                Мои нарачки
            </a>

            <a href="{{ url_for('preferences') }}">
                Мои преференции
            </a>

        {% endif %}

    </nav>

    <div class="nav-buttons">

        {% if session.get('korisnik_id') %}

            <span class="logged-user">
                👤 {{ session.get('ime') }}
            </span>

            <a href="{{ url_for('logout') }}"
               class="login-btn">
                Одјави се
            </a>

        {% else %}

            <a href="{{ url_for('login') }}"
               class="login-btn">
                Најава
            </a>

            <a href="{{ url_for('register') }}"
               class="register-btn">
                Регистрација
            </a>

        {% endif %}

    </div>

</header>


<section class="preferences-section">

    <div class="preferences-container">

        <!-- НАСЛОВ -->

        <div class="preferences-header">

            <span class="details-label">
                ПЕРСОНАЛИЗИРАЈ ГО ТВОЕТО ИСКУСТВО
            </span>

            <h1>
                Мои преференции
            </h1>

            <p>
                Избери ги жанровите и категориите што најмногу те интересираат.
                BiblioPremium ќе ги користи за да ти предложува книги според твоите интереси.
            </p>

        </div>


        <form method="POST"
              action="{{ url_for('preferences') }}">


            <!-- ЖАНРОВИ + КАТЕГОРИИ ЕДНО ДО ДРУГО -->

            <div class="preferences-columns">


                <!-- ЛЕВО - ЖАНРОВИ -->

                <div class="preferences-box preferences-column">

                    <div class="preferences-box-header">

                        <span class="details-label">
                            ЖАНРОВИ
                        </span>

                        <h2>
                            Кои жанрови ги сакаш?
                        </h2>

                        <p>
                            Избери еден или повеќе жанрови што најмногу те интересираат.
                        </p>

                    </div>


                    <div class="preferences-grid-compact">

                        {% for zhanr in zhanrovi %}

                            <label class="preference-card-new">

                                <input
                                    type="checkbox"
                                    name="zhanrovi"
                                    value="{{ zhanr[0] }}"
                                    {% if zhanr[0] in selected_zhanrovi %}
                                        checked
                                    {% endif %}
                                >

                                <div class="preference-content">

                                    <h3>
                                        {{ zhanr[1] }}
                                    </h3>

                                    <p>
                                        {{ zhanr[2] }}
                                    </p>

                                </div>

                            </label>

                        {% endfor %}

                    </div>

                </div>


                <!-- ДЕСНО - КАТЕГОРИИ -->

                <div class="preferences-box preferences-column">

                    <div class="preferences-box-header">

                        <span class="details-label">
                            КАТЕГОРИИ
                        </span>

                        <h2>
                            Што најмногу те интересира?
                        </h2>

                        <p>
                            Избери категории според темите и содржините што сакаш да ги читаш.
                        </p>

                    </div>


                    <div class="preferences-grid-compact">

                        {% for kategorija in kategorii %}

                            <label class="preference-card-new">

                                <input
                                    type="checkbox"
                                    name="kategorii"
                                    value="{{ kategorija[0] }}"
                                    {% if kategorija[0] in selected_kategorii %}
                                        checked
                                    {% endif %}
                                >

                                <div class="preference-content">

                                    <h3>
                                        {{ kategorija[1] }}
                                    </h3>

                                    <p>
                                        {{ kategorija[2] }}
                                    </p>

                                </div>

                            </label>

                        {% endfor %}

                    </div>

                </div>

            </div>


            <!-- ЗАЧУВАЈ -->

            <div class="preferences-save-new">

                <p>
                    Твоите избори ќе се користат за поперсонализирани препораки.
                </p>

                <button type="submit"
                        class="buy-btn">
                    Зачувај ги преференциите
                </button>

            </div>

        </form>

    </div>

</section>

</body>

</html>