102 lines
3.7 KiB
HTML
102 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Friends – ShooterHub</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||
<link rel="stylesheet" href="/css/app.css">
|
||
<style>
|
||
.friend-card { transition: box-shadow .15s; }
|
||
.friend-card:hover { box-shadow: 0 0 0 2px #0d6efd44 !important; }
|
||
.avatar-lg { width: 48px; height: 48px; border-radius: 50%; background: #0d6efd22;
|
||
color: #0d6efd; display: flex; align-items: center; justify-content: center;
|
||
font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
|
||
.req-card { background: #f8f9fa; border-radius: 8px; padding: .75rem 1rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="navbar"></div>
|
||
|
||
<div class="container py-4">
|
||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||
<h4 class="fw-bold mb-0"><i class="bi bi-people me-2 text-primary"></i>Friends</h4>
|
||
<button class="btn btn-primary btn-sm" id="addFriendBtn">
|
||
<i class="bi bi-person-plus me-1"></i>Add friend
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tabs -->
|
||
<ul class="nav nav-tabs mb-4" id="friendTabs">
|
||
<li class="nav-item">
|
||
<button class="nav-link active" data-tab="friends">
|
||
Friends <span class="badge bg-secondary ms-1" id="friendsCount">…</span>
|
||
</button>
|
||
</li>
|
||
<li class="nav-item">
|
||
<button class="nav-link" data-tab="requests">
|
||
Requests <span class="badge bg-danger ms-1 d-none" id="requestsCount"></span>
|
||
</button>
|
||
</li>
|
||
<li class="nav-item">
|
||
<button class="nav-link" data-tab="sent">
|
||
Sent <span class="badge bg-secondary ms-1 d-none" id="sentCount"></span>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Friends list -->
|
||
<div id="tabFriends">
|
||
<div class="row g-3" id="friendsGrid">
|
||
<div class="col-12 text-center text-muted py-4">Loading…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Incoming requests -->
|
||
<div id="tabRequests" class="d-none">
|
||
<div id="requestsList">
|
||
<div class="text-center text-muted py-4">Loading…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sent requests -->
|
||
<div id="tabSent" class="d-none">
|
||
<div id="sentList">
|
||
<div class="text-center text-muted py-4">Loading…</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add friend modal -->
|
||
<div class="modal fade" id="addFriendModal" tabindex="-1">
|
||
<div class="modal-dialog modal-sm">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title"><i class="bi bi-person-plus me-2"></i>Add friend</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="alert alert-danger d-none" id="addAlert"></div>
|
||
<label class="form-label small fw-semibold">Search by username</label>
|
||
<input type="text" class="form-control form-control-sm" id="friendSearch"
|
||
placeholder="Type at least 2 characters…" autocomplete="off">
|
||
<div class="list-group mt-2" id="friendSearchResults"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toastContainer"></div>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="/js/api.js"></script>
|
||
<script src="/js/utils.js"></script>
|
||
<script src="/js/i18n.js"></script>
|
||
<script src="/js/nav.js"></script>
|
||
<script src="/js/friends.js"></script>
|
||
</body>
|
||
</html>
|