153 lines
7.4 KiB
HTML
153 lines
7.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>Profile – 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">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="navbar"></div>
|
|||
|
|
|
|||
|
|
<div class="container py-4">
|
|||
|
|
<h2 class="fw-bold mb-4"><i class="bi bi-person-circle me-2"></i><span data-i18n="profile.title">My Profile</span></h2>
|
|||
|
|
|
|||
|
|
<div class="row g-4">
|
|||
|
|
|
|||
|
|
<!-- ── Left: Avatar ────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="col-md-3 text-center">
|
|||
|
|
<div class="card border-0 shadow-sm p-4">
|
|||
|
|
<div class="mb-3" id="avatarWrap">
|
|||
|
|
<div class="avatar-circle-lg mx-auto" id="avatarInitials">?</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-muted small mb-3" id="profileUsername"></div>
|
|||
|
|
<label class="btn btn-outline-secondary btn-sm w-100">
|
|||
|
|
<i class="bi bi-upload me-1"></i><span data-i18n="profile.avatar.upload">Upload avatar</span>
|
|||
|
|
<input type="file" id="avatarInput" accept="image/*" class="d-none">
|
|||
|
|
</label>
|
|||
|
|
<div id="avatarAlert" class="alert alert-danger mt-2 d-none small"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── Right: Forms ────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="col-md-9">
|
|||
|
|
|
|||
|
|
<!-- Profile info -->
|
|||
|
|
<div class="card border-0 shadow-sm mb-4">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h5 class="card-title fw-semibold mb-3" data-i18n="profile.personal.title">Personal information</h5>
|
|||
|
|
<form id="profileForm">
|
|||
|
|
<div class="row g-3">
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<label class="form-label" data-i18n="profile.form.first_name">First name</label>
|
|||
|
|
<input type="text" class="form-control" id="firstName">
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<label class="form-label" data-i18n="profile.form.last_name">Last name</label>
|
|||
|
|
<input type="text" class="form-control" id="lastName">
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12">
|
|||
|
|
<label class="form-label text-muted"><span data-i18n="profile.form.email">Email</span> <span class="small" data-i18n="profile.form.email.ro">(read-only)</span></label>
|
|||
|
|
<input type="email" class="form-control" id="email" readonly>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="profileAlert" class="alert mt-3 d-none"></div>
|
|||
|
|
<div class="mt-3">
|
|||
|
|
<button type="submit" class="btn btn-primary" id="saveProfileBtn" data-i18n="profile.form.save">Save changes</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Change password -->
|
|||
|
|
<div class="card border-0 shadow-sm mb-4">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h5 class="card-title fw-semibold mb-3" data-i18n="profile.pw.title">Change password</h5>
|
|||
|
|
<form id="passwordForm">
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label class="form-label" data-i18n="profile.form.pw.current">Current password</label>
|
|||
|
|
<input type="password" class="form-control" id="oldPassword" required>
|
|||
|
|
</div>
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label class="form-label" data-i18n="profile.form.pw.new">New password</label>
|
|||
|
|
<input type="password" class="form-control" id="newPassword1" required>
|
|||
|
|
</div>
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label class="form-label" data-i18n="profile.form.pw.confirm">Confirm new password</label>
|
|||
|
|
<input type="password" class="form-control" id="newPassword2" required>
|
|||
|
|
</div>
|
|||
|
|
<div id="passwordAlert" class="alert mt-2 d-none"></div>
|
|||
|
|
<button type="submit" class="btn btn-primary" data-i18n="profile.form.pw.change">Change password</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── Quick links ─────────────────────────────────────────────────────── -->
|
|||
|
|
<div class="row g-3 mt-2 mb-2">
|
|||
|
|
<div class="col-6 col-sm-3">
|
|||
|
|
<a href="/chrono.html" class="text-decoration-none">
|
|||
|
|
<div class="card border-0 shadow-sm h-100 text-center p-3 feature-card">
|
|||
|
|
<div class="feature-icon mb-2 text-primary mx-auto"><i class="bi bi-speedometer2"></i></div>
|
|||
|
|
<div class="fw-semibold small" data-i18n="profile.link.analyses">My analyses</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6 col-sm-3">
|
|||
|
|
<a href="/sessions.html" class="text-decoration-none">
|
|||
|
|
<div class="card border-0 shadow-sm h-100 text-center p-3 feature-card">
|
|||
|
|
<div class="feature-icon mb-2 text-primary mx-auto"><i class="bi bi-activity"></i></div>
|
|||
|
|
<div class="fw-semibold small" data-i18n="profile.link.sessions">My sessions</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6 col-sm-3">
|
|||
|
|
<a href="/chrono.html" class="text-decoration-none">
|
|||
|
|
<div class="card border-0 shadow-sm h-100 text-center p-3 feature-card">
|
|||
|
|
<div class="feature-icon mb-2 text-primary mx-auto"><i class="bi bi-images"></i></div>
|
|||
|
|
<div class="fw-semibold small" data-i18n="profile.link.photos">My photos</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6 col-sm-3">
|
|||
|
|
<a href="/gears.html" class="text-decoration-none">
|
|||
|
|
<div class="card border-0 shadow-sm h-100 text-center p-3 feature-card">
|
|||
|
|
<div class="feature-icon mb-2 text-primary mx-auto"><i class="bi bi-diagram-3"></i></div>
|
|||
|
|
<div class="fw-semibold small" data-i18n="profile.link.gears">My gears</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ── Rigs visibility ──────────────────────────────────────────────────── -->
|
|||
|
|
<div class="card border-0 shadow-sm mt-2">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h5 class="card-title fw-semibold mb-3"><i class="bi bi-diagram-3 me-2"></i><span data-i18n="profile.rigs.title">My rigs</span></h5>
|
|||
|
|
<div id="rigsSpinner" class="text-center py-3"><div class="spinner-border text-primary"></div></div>
|
|||
|
|
<div id="rigsEmpty" class="text-muted d-none"><span data-i18n="profile.rigs.empty">You have no rigs yet.</span> <a href="/gears.html">Create one</a>.</div>
|
|||
|
|
<div class="table-responsive d-none" id="rigsTableWrap">
|
|||
|
|
<table class="table align-middle">
|
|||
|
|
<thead class="table-light">
|
|||
|
|
<tr><th data-i18n="profile.table.name">Name</th><th data-i18n="profile.table.items">Items</th><th data-i18n="profile.table.visibility">Visibility</th><th></th></tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody id="rigsBody"></tbody>
|
|||
|
|
</table>
|
|||
|
|
</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/i18n.js"></script>
|
|||
|
|
<script src="/js/nav.js"></script>
|
|||
|
|
<script src="/js/profile.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|