174 lines
6.3 KiB
HTML
174 lines
6.3 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/components/titlebar.css">
|
|
<link rel="stylesheet" href="/views/css/users.css">
|
|
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
<script src="/src/scripts/titlebar.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="titlebar"> <div class="title-left">
|
|
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
<span class="app-title">WaifuBoard</span>
|
|
</div>
|
|
<div class="title-right">
|
|
<button class="min">—</button>
|
|
<button class="max">🗖</button>
|
|
<button class="close">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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 up to 5MB</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> |