Chatty / templates /base.html
findEthics
Fix mobile header layout and change buttons to text
f998846
Raw
History Blame Contribute Delete
3.35 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>{% block title %}Chatty{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
{% block head %}{% endblock %}
</head>
<body>
<div class="container">
<header class="header">
<div class="header-content">
<!-- Title (left) -->
<div class="header-title">
<h1><a href="{{ url_for('index') }}" class="logo-link">Chatty</a></h1>
</div>
<!-- Navigation (right) -->
<nav class="header-nav">
{% if current_user.is_authenticated %}
<span class="user-info desktop-only">{{ current_user.email }}</span>
<form method="POST" action="{{ url_for('logout') }}" class="logout-form">
{% if config.WTF_CSRF_ENABLED %}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
{% endif %}
<button type="submit" class="nav-button logout-button">
<span class="desktop-only">Logout</span>
<span class="mobile-only"></span>
</button>
</form>
{% elif is_anonymous %}
<span class="user-info anonymous-user desktop-only">Anonymous</span>
<a href="{{ url_for('login') }}" class="nav-button">
<span>Login</span>
</a>
<a href="{{ url_for('register') }}" class="nav-button">
<span>Register</span>
</a>
{% else %}
<a href="{{ url_for('login') }}" class="nav-button">
<span>Login</span>
</a>
<a href="{{ url_for('register') }}" class="nav-button">
<span>Register</span>
</a>
{% endif %}
</nav>
</div>
</header>
<main class="main-content">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flash-messages">
{% for category, message in messages %}
<div class="flash-message flash-{{ category }}">{{ message }}</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
</div>
{% block scripts %}{% endblock %}
</body>
</html>