forked from retoor/devplacepy
retoor
15a3b990fe
Add complete project skeleton including .gitignore, Makefile, AGENTS.md, config, database init with indexes, main app with router mounting for auth/feed/posts/comments/projects/profile/messages/notifications/votes, Pydantic models for signup/login/post/comment/project/message/profile, and auth router with signup/login page rendering and form handling.
72 lines
3.4 KiB
HTML
72 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="/static/css/notifications.css">
|
|
<style>
|
|
.topnav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--nav-height);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.topnav-inner {
|
|
max-width: var(--max-content);
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
.topnav-logo { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
|
|
.topnav-logo span { color: var(--accent); }
|
|
.topnav-links { display: flex; gap: 0.25rem; }
|
|
.topnav-link { padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; }
|
|
.topnav-link:hover { color: var(--text-primary); background: var(--bg-card); }
|
|
.topnav-link.active { color: var(--accent); background: var(--accent-light); }
|
|
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
|
|
.topnav-icon { position: relative; padding: 0.375rem; color: var(--text-secondary); font-size: 1.25rem; transition: color 0.2s; }
|
|
.topnav-icon:hover { color: var(--text-primary); }
|
|
.nav-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
|
.topnav-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: var(--radius); transition: background 0.2s; }
|
|
.topnav-user:hover { background: var(--bg-card); }
|
|
.topnav-user-info { display: flex; flex-direction: column; line-height: 1.2; }
|
|
.topnav-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
|
|
.topnav-user-role { font-size: 0.6875rem; color: var(--text-muted); }
|
|
</style>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="notifications-page">
|
|
<div class="notifications-header">
|
|
<h2>Notifications</h2>
|
|
<form method="POST" action="/notifications/mark-all-read" style="display:inline;">
|
|
<button type="submit" class="btn btn-ghost btn-sm">Mark all read</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="notifications-list">
|
|
{% for item in notifications %}
|
|
<div class="notification-card {% if not item.notification['read'] %}unread{% endif %}">
|
|
<div class="avatar avatar-sm">{{ item.actor['username'][:1].upper() if item.actor else '?' }}</div>
|
|
<div class="notification-body">
|
|
<div class="notification-text">{{ item.notification['message'] }}</div>
|
|
<div class="notification-time">{{ item.time_ago }}</div>
|
|
</div>
|
|
<form method="POST" action="/notifications/mark-read/{{ item.notification['uid'] }}" style="display:inline;">
|
|
<button type="submit" class="notification-dismiss" data-uid="{{ item.notification['uid'] }}">×</button>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<div class="notifications-empty">
|
|
<p>No notifications yet</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|