chixana/templates/main.html.twig

{% extends 'base.html.twig' %}

{% block stylesheets %}
    <style type="text/css">
        BODY {
            margin: 0;
        }
        .top-layer {
            background: url(https://image.freepik.com/free-vector/seamless-pattern-microbes-virus-vector-illustration_53562-5156.jpg) repeat-x;
            height: 69px;
            border-bottom: 2px solid maroon;
        }
        .bottom-layer {
            font-family: 'Helvetica Neue', Helvetica,Arial, sans-serif;
            font-size: 15px;
            color: #ddd;
            background-color: #000;
            padding: 2px;
            text-align: center;
        }
        .content-quote {
            font-family: "Georgia", serif;
            color: #666;
            font-style: italic;
            line-height: 1.8;
            border-left: 5px solid #ddd;
            padding-left: 1.5em;
        }
        .my-button {
            background: rgb(66, 184, 221);
            font-size: 150%;
            margin-bottom: 10px;
        }
        .my-btn-small {
            background: rgb(66, 184, 221);
            font-size: 70%;
        }
        .color-green {
            color:green;
        }
        .color-red {
            color:brown;
        }

        [data-message] {
            position: relative;
        }

        [data-message]:hover:after {
            opacity: 1;
            transition: all .3s ease;
            bottom: 25px;
            left: 0;
        }

        [data-message]:after {
            content: attr(data-message);
            position: absolute;
            left: 0;
            bottom: 20px;
            font-size: .8em;
            opacity: 0;
            padding: 5px 10px;
            background: rgba(0,0,0, .8);
            border-radius: 5px;
            transition: all .3s ease;
            white-space: nowrap;
            color: #fff;
        }

        [data-message]:before {
            height: 0;
            width: 0;
            content: '';
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid rgba(0,0,0, .8);
            position: absolute;
            left: 5px;
            opacity: 0;
            bottom: 15px;
            transition: all .3s ease;
        }

        [data-message]:hover:before {
            opacity: 1;
            bottom: 20px;
            transition: all .3s ease;
        }
    </style>
{% endblock %}

{% block body %}
<div class="top-layer">
    <img src="{{ asset('images/frank.svg') }}"
         width="279" height="160" alt="Logo">
</div>

<div style="margin: 0 64px;">
    <div class="pure-menu pure-menu-horizontal" style="margin-left: 160px; width: 1090px;">
        <ul class="pure-menu-list">
            <li class="pure-menu-item">
                <a href="{{ path('app_main_index') }}" class="pure-menu-link">
                    Chixana!
                </a>
            </li>
            <li class="pure-menu-item">
                {% if is_granted('ROLE_USER') %}
                    <a href="#" class="pure-menu-link" style="padding: 0">
                        <div style="align-items: center; display: flex;">
                            <img src="{{ app.user.avatar }}" width="25px" height="25px" style="padding: 4px"/>
                            <div>{{ app.user.name }}</div>
                        </div>
                    </a>
                {% else %}
                    <a href="{{ path('connect_google') }}" class="pure-menu-link">
                        Вход через Google
                    </a>
                {% endif %}
            </li>
            {% if is_granted('ROLE_USER') %}
                <li class="pure-menu-item"><a href="{{ path('app_logout') }}" class="pure-menu-link">Выход</a></li>
            {% endif %}
        </ul>
    </div>
    <div class="pure-g" style="max-width: 1250px; min-height: 600px">
    {% block content %}{% endblock %}
    </div>

    <div style="height: 40px"></div>
    <div class="bottom-layer">
        <span>Chixana © {{ "now"|date("Y") }}</span>
        <iframe src="https://ghbtns.com/github-btn.html?user=stan220&repo=chixana&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
    </div>
</div>

{% endblock %}