263 lines
10 KiB
HTML
263 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>WaifuBoard - Users</title>
|
|
<link rel="stylesheet" href="/views/css/globals.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="/views/css/components/updateNotifier.css"
|
|
/>
|
|
<link rel="stylesheet" href="/views/css/users.css" />
|
|
<link
|
|
rel="icon"
|
|
href="/public/assets/waifuboards.ico"
|
|
type="image/x-icon"
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="background-gradient"></div>
|
|
|
|
<div class="content-container">
|
|
<div class="header-section">
|
|
<h1 class="page-title">Who's exploring?</h1>
|
|
<p class="page-subtitle">Select your profile to continue</p>
|
|
</div>
|
|
|
|
<div class="users-grid" id="usersGrid"></div>
|
|
|
|
<button class="btn-add-user" id="btnAddUser">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Add User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="modalCreateUser">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Create New User</h2>
|
|
<button class="modal-close" id="closeCreateModal">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form id="createUserForm">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
required
|
|
maxlength="20"
|
|
placeholder="Enter your name"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Profile Picture</label>
|
|
<div class="avatar-upload-area" id="avatarUploadArea">
|
|
<div class="avatar-preview" id="avatarPreview">
|
|
<svg
|
|
class="avatar-preview-placeholder"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
|
|
></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
<p class="avatar-upload-text">
|
|
Click to upload or drag and drop
|
|
</p>
|
|
<p class="avatar-upload-hint">
|
|
PNG, JPG, GIF... up to 50 MB
|
|
</p>
|
|
</div>
|
|
<input type="file" id="avatarInput" accept="image/*" />
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button
|
|
type="button"
|
|
class="btn-secondary"
|
|
id="cancelCreate"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn-primary">
|
|
Create User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="modalUserActions">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content" style="max-width: 400px">
|
|
<div class="modal-header">
|
|
<h2 id="actionsModalTitle">Manage Profile</h2>
|
|
<button class="modal-close" id="closeActionsModal">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="actionsModalContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="modalEditUser">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Edit Profile</h2>
|
|
<button class="modal-close" id="closeEditModal">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form id="editUserForm">
|
|
<div class="form-group">
|
|
<label for="editUsername">Username</label>
|
|
<input
|
|
type="text"
|
|
id="editUsername"
|
|
name="username"
|
|
required
|
|
maxlength="20"
|
|
placeholder="Enter your new name"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Profile Picture</label>
|
|
<div
|
|
class="avatar-upload-area"
|
|
id="editAvatarUploadArea"
|
|
>
|
|
<div class="avatar-preview" id="editAvatarPreview">
|
|
<svg
|
|
class="avatar-preview-placeholder"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
|
|
></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
<p class="avatar-upload-text">
|
|
Click to upload or drag and drop
|
|
</p>
|
|
<p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
id="editAvatarInput"
|
|
accept="image/*"
|
|
/>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button
|
|
type="button"
|
|
class="btn-secondary"
|
|
id="cancelEdit"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn-primary">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="modalAniList">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>AniList Integration</h2>
|
|
<button class="modal-close" id="closeAniListModal">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="aniListContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="userToastContainer"></div>
|
|
<div id="updateToast" class="hidden">
|
|
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
<a
|
|
id="downloadButton"
|
|
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
target="_blank"
|
|
>
|
|
Click To Download
|
|
</a>
|
|
</div>
|
|
<script>
|
|
localStorage.removeItem("token");
|
|
</script>
|
|
<script src="/src/scripts/updateNotifier.js"></script>
|
|
<script src="/src/scripts/users.js"></script>
|
|
</body>
|
|
</html>
|