Pjotir
/
StellarFrontier


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stellar Frontier</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background-color: #0a0a0a;
            color: #e0e0e0;
            min-height: 100vh;
        }

        .navbar {
            background-color: #1a1a1a;
            border-bottom: 1px solid #333;
        }

        .navbar-item,
        .navbar-link {
            color: #e0e0e0;
        }

        .navbar-item:hover,
        .navbar-link:hover {
            background-color: #333;
            color: #fff;
        }

        .card {
            background-color: #1a1a1a;
            color: #e0e0e0;
            border: 1px solid #333;
        }

        .title,
        .subtitle,
        .label,
        .input,
        .textarea,
        .select select {
            color: #e0e0e0;
        }

        .input,
        .textarea,
        .select select {
            background-color: #2a2a2a;
            border-color: #444;
        }

        .input::placeholder,
        .select select::placeholder,
        .textarea::placeholder {
            color: #e0e0e04d;
        }

        .input:focus,
        .textarea:focus,
        .select select:focus {
            border-color: #666;
        }

        .box {
            background-color: #1a1a1a;
            color: #e0e0e0;
            border: 1px solid #333;
        }

        .content h1,
        .content h2,
        .content h3,
        .content h4,
        .content h5,
        .content h6,
        .content label,
        .content p {
            color: #e0e0e0;
        }

        .label {
            color: #b5b5b5;
        }

        .menu-label {
            color: #888;
        }

        .menu-list a {
            color: #e0e0e0;
        }

        .menu-list a:hover {
            background-color: #333;
            color: #fff;
        }

        .menu-list a.is-active {
            background-color: #3273dc;
            color: #fff;
        }

        .table {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }

        .table th {
            color: #fff;
        }

        .table tr:hover,
        .table.is-hoverable tbody tr:not(.is-selected):hover {
            background-color: #2a2a2a;
        }

        .table td,
        .table th {
            border-color: #333;
        }

        .modal-card-head,
        .modal-card-body,
        .modal-card-foot {
            background-color: #1a1a1a;
            border-color: #333;
            color: #e0e0e0;
        }

        .modal-card-title {
            color: #e0e0e0;
        }

        hr {
            background-color: #333;
        }

        strong {
            color: #fff;
        }

        /* Space background effect */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px),
                radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px),
                radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px);
            background-size: 550px 550px, 350px 350px, 250px 250px;
            background-position: 0 0, 40 60, 130 270;
            opacity: 0.1;
            z-index: -1;
        }
    </style>
</head>

<body>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                <strong>Stellar Frontier</strong>
            </a>
        </div>

        <div class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="/">Home</a>
                <a class="navbar-item" href="/rules">Rules</a>
                {% if current_user and current_user.is_authenticated %}
                <a class="navbar-item" href="/tickets">Support</a>
                <a class="navbar-item" href="/apply">Apply</a>
                {% endif %}
            </div>

            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        {% if current_user and current_user.is_authenticated %}
                        {% if current_user.is_admin %}
                        <a class="button is-warning" href="/admin">
                            <strong>Admin Panel</strong>
                        </a>
                        {% endif %}
                        <a class="button is-light" href="/profile">
                            Profile
                        </a>
                        <a class="button is-danger" href="/auth/logout">
                            Log out
                        </a>
                        {% else %}
                        <a class="button is-primary" href="/auth/login">
                            <strong>Log in with Discord</strong>
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <section class="section">
        <div class="container">
            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            {% for category, message in messages %}
            <div class="notification is-{{ category }}">
                {{ message }}
            </div>
            {% endfor %}
            {% endif %}
            {% endwith %}

            {% block content %}{% endblock %}
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    {% block scripts %}{% endblock %}
</body>

</html>