ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

new dashboard page

Browse Source
This commit is contained in:
lenafx
2025-12-31 20:01:57 +01:00
parent 991c58d91d
commit c9c4cc074c
18 changed files with 3400 additions and 2041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker/views/components/navbar.html
View File

@@ -7,11 +7,11 @@
</a>
<div class="nav-center">
<button class="nav-button" data-page="dashboard" onclick="window.location.href='/dashboard'">Dashboard</button>
<button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button" data-page="my-list" onclick="window.location.href='/my-list'">My List</button>
<button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>

1031
docker/views/css/dashboard.css Normal file
View File

File diff suppressed because it is too large Load Diff

507
docker/views/css/list.css
View File

@@ -1,507 +0,0 @@
.container {
max-width: 1600px;
margin: 0 auto;
padding: 3rem;
}
.header-section {
margin-bottom: 3rem;
margin-top: 3rem;
}
.page-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 2rem;
background: linear-gradient(135deg, var(--color-primary), #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.stat-card {
background: var(--color-bg-elevated);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition:
transform 0.3s,
box-shadow 0.3s;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px var(--color-primary-glow);
}
.stat-value {
font-size: 2.5rem;
font-weight: 900;
color: var(--color-primary);
}
.stat-label {
font-size: 0.9rem;
color: var(--color-text-secondary);
font-weight: 600;
}
.filters-section {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--color-bg-elevated);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.05);
flex-wrap: wrap;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 150px;
}
.filter-group label {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.filter-select {
background: var(--color-bg-base);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-primary);
padding: 0.7rem 1rem;
border-radius: 8px;
font-family: inherit;
cursor: pointer;
transition: 0.2s;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a1a1aa'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 1.2em;
padding-right: 2.5rem;
}
.filter-select:hover {
border-color: var(--color-primary);
}
.filter-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 10px var(--color-primary-glow);
}
.view-toggle {
display: flex;
gap: 0.5rem;
}
.view-btn {
background: var(--color-bg-base);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
padding: 0.7rem;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.view-btn:hover {
border-color: var(--color-primary);
color: white;
}
.view-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 0;
gap: 1.5rem;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(139, 92, 246, 0.1);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 0;
gap: 1.5rem;
color: var(--color-text-secondary);
}
.empty-state svg {
opacity: 0.3;
}
.empty-state h2 {
font-size: 1.8rem;
color: var(--color-text-primary);
}
.list-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 2rem;
}
.list-grid.list-view {
grid-template-columns: 1fr;
gap: 1rem;
}
.list-item {
background: var(--color-bg-elevated-hover);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.list-item:hover {
transform: translateY(-8px);
border-color: var(--color-primary);
box-shadow: 0 15px 30px var(--color-primary-glow);
}
.list-grid.list-view .list-item {
flex-direction: row;
align-items: center;
padding-right: 1rem;
transition: all 0.3s ease;
}
.list-grid.list-view .list-item:hover {
transform: none;
box-shadow: 0 4px 20px var(--color-primary-glow);
}
.item-poster-link {
display: block;
cursor: pointer;
flex-shrink: 0;
}
.item-poster {
width: 100%;
aspect-ratio: 2/3;
object-fit: cover;
background: #222;
}
.list-grid.list-view .item-poster {
width: 120px;
height: 180px;
aspect-ratio: auto;
border-radius: 8px;
margin: 1rem;
}
.item-content {
padding: 1rem;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
.list-grid.list-view .item-content {
padding: 1rem 0;
flex-direction: row;
align-items: center;
}
.list-grid.list-view .item-content > div:first-child {
flex-basis: 75%;
}
.item-title {
font-size: 1rem;
font-weight: 800;
margin-bottom: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: white;
}
.list-grid.list-view .item-title {
font-size: 1.3rem;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
}
.item-meta {
display: flex;
gap: 0.3rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
line-height: 1.4;
}
.meta-pill {
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
border-radius: 999px;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
}
.status-pill {
background: rgba(34, 197, 94, 0.2);
color: var(--color-success);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.type-pill {
background: rgba(139, 92, 246, 0.15);
color: var(--color-primary);
border: 1px solid rgba(139, 92, 246, 0.3);
}
.source-pill {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.repeat-pill {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.3);
text-transform: none;
}
.private-pill {
background: rgba(251, 191, 36, 0.15);
color: #facc15;
border: 1px solid rgba(251, 191, 36, 0.3);
text-transform: none;
}
.progress-bar-container {
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
height: 10px;
overflow: hidden;
margin-bottom: 0.5rem;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), #a78bfa);
border-radius: 999px;
transition: width 0.3s;
}
.progress-text {
font-size: 0.9rem;
color: var(--color-text-secondary);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
}
.score-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-weight: 700;
color: #facc15;
background: rgba(250, 204, 21, 0.1);
padding: 0.1rem 0.5rem;
border-radius: 4px;
}
.edit-icon-btn {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 50;
background: rgba(18, 18, 21, 0.9);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition:
opacity 0.3s,
transform 0.2s,
background 0.2s;
}
.list-item:hover .edit-icon-btn {
opacity: 1;
transform: scale(1.05);
}
.edit-icon-btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
}
.list-grid.list-view .edit-icon-btn {
position: relative;
top: auto;
right: auto;
margin-left: auto;
opacity: 1;
transform: none;
background: var(--color-bg-elevated);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.list-grid.list-view .list-item:hover .edit-icon-btn {
opacity: 1;
background: var(--color-primary);
border-color: var(--color-primary);
transform: none;
}
@media (max-width: 768px) {
.container {
padding: 1rem;
width: 100%;
}
.header-section {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.page-title {
font-size: 2rem;
text-align: center;
margin-bottom: 1.5rem;
}
.stats-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.stat-card {
padding: 1rem;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.stat-value {
font-size: 1.8rem;
order: 2;
}
.stat-label {
font-size: 1rem;
order: 1;
}
.filters-section {
flex-direction: column;
padding: 1rem;
gap: 1rem;
}
.filter-group {
min-width: 100%;
}
.filter-select {
width: 100%;
padding: 0.8rem;
}
.view-toggle {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.view-btn {
justify-content: center;
}
.list-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
}
.item-title {
font-size: 0.9rem;
}
.item-meta {
gap: 0.2rem;
}
.meta-pill {
font-size: 0.6rem;
padding: 0.1rem 0.3rem;
}
.edit-icon-btn {
opacity: 1;
background: rgba(0, 0, 0, 0.6);
width: 35px;
height: 35px;
}
}

195
docker/views/dashboard.html Normal file
View File

@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<title>Dashboard - WaifuBoard</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/dashboard.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<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="main-wrapper">
<section class="profile-header">
<div class="profile-banner"></div> <div class="profile-body">
<div class="profile-avatar-wrapper">
<img id="user-avatar" src="/public/assets/placeholder.svg" alt="Profile" class="avatar-img">
<label for="avatar-upload" class="avatar-edit-overlay">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</label>
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
</div>
<div class="profile-details">
<div class="profile-text">
<div class="username-wrapper">
<h1 id="user-username">Loading...</h1>
<a id="header-anilist-link" href="#" target="_blank" class="header-anilist-badge" style="display: none;">
<img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AniList">
</a>
</div>
</div>
<div class="profile-stats-grid">
<div class="stat-card">
<span class="stat-value" id="total-stat">0</span>
<span class="stat-label">Total Entries</span>
</div>
<div class="stat-card">
<span class="stat-value" id="anime-stat">-</span>
<span class="stat-label">Anime</span>
</div>
<div class="stat-card">
<span class="stat-value" id="manga-stat">-</span>
<span class="stat-label">Manga</span>
</div>
</div>
</div>
</div>
<div class="hub-navigation-modern">
<button class="nav-pill active" data-target="tracking">Tracking List</button>
<button class="nav-pill" data-target="local">Local Library</button>
<button class="nav-pill" data-target="settings">Settings</button>
</div>
</section>
<div class="content-container">
<div id="section-tracking" class="tab-section active">
<div class="toolbar">
<div class="search-box">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="text" class="search-input" placeholder="Search your list...">
</div>
<div class="filters-inline">
<select id="status-filter" class="minimal-select"><option value="all">Status: All</option><option value="CURRENT">Watching</option><option value="COMPLETED">Completed</option><option value="PLANNING">Planning</option><option value="PAUSED">Paused</option><option value="DROPPED">Dropped</option></select>
<select id="type-filter" class="minimal-select"><option value="all">Type: All</option><option value="ANIME">Anime</option><option value="MANGA">Manga</option><option value="NOVEL">Novel</option></select>
<select id="sort-filter" class="minimal-select"><option value="updated">Latest</option><option value="score">Score</option><option value="title">A-Z</option></select>
<div class="view-toggle">
<button class="view-btn active" data-view="grid">⊞</button>
<button class="view-btn" data-view="list">☰</button>
</div>
</div>
</div>
<div id="loading-state" class="loading-state"><div class="spinner"></div></div>
<div id="empty-state" class="empty-state" style="display: none;">
<p>No content found</p>
<a href="/anime" class="btn-blur">Discover Content</a>
</div>
<div id="list-container" class="list-grid"></div>
</div>
<div id="section-local" class="tab-section">
<div class="section-header-row">
<h2>Local Library</h2>
<div class="actions">
<button id="scan-incremental-btn" class="btn-primary">Update Library</button>
<button id="scan-full-btn" class="btn-blur">Full Rescan</button>
</div>
</div>
<div class="local-stats-grid">
<div class="local-card"><h3>Anime Files</h3><p id="local-anime-count">0</p></div>
<div class="local-card"><h3>Manga Files</h3><p id="local-manga-count">0</p></div>
<div class="local-card"><h3>Novel Files</h3><p id="local-novel-count">0</p></div>
</div>
<div class="console-output" id="scan-console" style="display: none;">
<div class="spinner small"></div> <span id="scan-status-text">Scanning...</span>
</div>
</div>
<div id="section-settings" class="tab-section">
<div class="settings-layout">
<div class="settings-card">
<h3>Edit Profile</h3>
<form id="profile-form">
<div class="form-group">
<label>Display Name</label>
<input type="text" id="setting-username" class="input-modern" placeholder="Username">
</div>
<div class="form-group">
<label>Avatar Source</label>
<div class="avatar-options">
<button type="button" class="btn-secondary small" onclick="document.getElementById('avatar-upload').click()">Upload File</button>
<span class="divider-text">OR</span>
<input type="text" id="setting-avatar-url" class="input-modern" placeholder="Paste Image URL (https://...)">
</div>
<small style="color: var(--color-text-muted); display:block; margin-top:5px;">
* If you upload a file, it will be converted automatically. The text box above is only for external URLs.
</small>
</div>
<button type="submit" class="btn-primary full-width">Save Profile Changes</button>
</form>
</div>
<div class="settings-stack">
<div class="settings-card">
<h3>Security</h3>
<form id="password-form">
<div class="form-group">
<label>Current Password</label>
<input type="password" id="current-password" class="input-modern" placeholder="••••••">
</div>
<div class="form-group">
<label>New Password</label>
<input type="password" id="new-password" class="input-modern" placeholder="••••••">
</div>
<button type="submit" class="btn-blur full-width">Update Password</button>
</form>
</div>
<div class="settings-card">
<h3>Integrations</h3>
<div class="integration-item">
<div class="int-icon anilist-bg"><img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AL"></div>
<div class="int-details">
<strong>AniList</strong>
<span id="anilist-status">Checking...</span>
</div>
<button id="anilist-action-btn" class="btn-sm">Connect</button>
</div>
</div>
<div class="settings-card danger-zone">
<h3>Danger Zone</h3>
<button id="logout-btn" class="btn-danger">Log Out</button>
</div>
</div>
</div>
</div>
</div>
</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">Download</a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/dashboard.js"></script>
</body>
</html>

132
docker/views/list.html
View File

@@ -1,132 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<title>My Lists - WaifuBoard</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/list.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
</head>
<body>
<div class="container">
<div class="header-section">
<h1 class="page-title">My List</h1>
<div class="stats-row">
<div class="stat-card">
<span class="stat-value" id="total-count">0</span>
<span class="stat-label">Total Entries</span>
</div>
<div class="stat-card">
<span class="stat-value" id="watching-count">0</span>
<span class="stat-label">Watching</span>
</div>
<div class="stat-card">
<span class="stat-value" id="completed-count">0</span>
<span class="stat-label">Completed</span>
</div>
<div class="stat-card">
<span class="stat-value" id="planned-count">0</span>
<span class="stat-label">Planning</span>
</div>
</div>
</div>
<div class="filters-section">
<div class="filter-group">
<label>Status</label>
<select id="status-filter" class="filter-select">
<option value="all">All Status</option>
<option value="CURRENT">Watching</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Planning</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
</select>
</div>
<div class="filter-group">
<label>Source</label>
<select id="source-filter" class="filter-select">
<option value="all">All Sources</option>
<option value="anilist">AniList</option>
</select>
</div>
<div class="filter-group">
<label>Type</label>
<select id="type-filter" class="filter-select">
<option value="all">All Types</option>
<option value="ANIME">Anime</option>
<option value="MANGA">Manga</option>
<option value="NOVEL">Novel</option>
</select>
</div>
<div class="filter-group">
<label>Sort By</label>
<select id="sort-filter" class="filter-select">
<option value="updated">Last Updated</option>
<option value="title">Title (A-Z)</option>
<option value="score">Score (High-Low)</option>
<option value="progress">Progress</option>
</select>
</div>
<div class="filter-group">
<label>View</label>
<div class="view-toggle">
<button class="view-btn active" data-view="grid">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1"/>
<rect x="14" y="3" width="7" height="7" rx="1"/>
<rect x="3" y="14" width="7" height="7" rx="1"/>
<rect x="14" y="14" width="7" height="7" rx="1"/>
</svg>
</button>
<button class="view-btn" data-view="list">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<rect x="3" y="5" width="18" height="2" rx="1"/>
<rect x="3" y="11" width="18" height="2" rx="1"/>
<rect x="3" y="17" width="18" height="2" rx="1"/>
</svg>
</button>
</div>
</div>
</div>
<div id="loading-state" class="loading-state">
<div class="spinner"></div>
<p>Loading your list...</p>
</div>
<div id="empty-state" class="empty-state" style="display: none;">
<svg width="120" height="120" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
<h2>Your list is empty</h2>
<p>Start adding anime to track your progress</p>
<button class="btn-primary" onclick="window.location.href='/anime'">Browse Content</button>
</div>
<div id="list-container" class="list-grid"></div>
</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 src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/list.js"></script>
</body>
</html>