Basically wrote the whole thing.

This commit is contained in:
Aodhan
2025-06-25 04:21:13 +01:00
parent 1ff4a6f6d7
commit c5391a957d
216 changed files with 168676 additions and 1303 deletions

View File

@@ -29,6 +29,27 @@
padding: 10px;
font-size: 0.9rem;
}
/* Sort section */
.sort-section {
margin-bottom: 15px;
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.sort-select {
padding: 6px 10px;
border-radius: var(--border-radius);
}
.sort-dir-btn {
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
padding: 6px 10px;
cursor: pointer;
font-size: 0.9rem;
}
</style>
</head>
<body>
@@ -63,19 +84,24 @@
<div class="container">
<header class="header">
<h1 class="app-title"><img src="static/logo.png" alt="Swaipu logo" class="logo logo-half"> Swaipu History</h1>
<a href="/" class="history-link">Back to Swipe</a>
<h1 class="app-title"><a href="/" aria-label="Home"><img src="static/logo.png" alt="Swaipu logo" class="logo logo-wide"></a></h1>
</header>
<div class="filter-container">
<div class="search-section" style="display:flex;gap:8px;align-items:center;margin-bottom:15px;">
<input type="text" id="search-input" placeholder="Add keywords..." class="search-input">
<button id="search-button" class="action-btn search-btn" title="Add keyword"><img src="static/icons/add.svg" alt="Add" class="btn-icon"></button>
<div class="keyword-pills-container"></div>
</div>
<div class="filter-container">
<div class="filter-section">
<h4>Action</h4>
<div class="filter-buttons">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="left">Discarded</button>
<button class="filter-btn" data-filter="right">Kept</button>
<button class="filter-btn" data-filter="up">Favorited</button>
<button class="filter-btn" data-filter="down">Review</button>
<button class="filter-btn active" data-filter="all"><img src="/static/icons/all.svg" alt="All" class="action-filter"></button>
<button class="filter-btn" data-filter="Discarded"><img src="/static/icons/discard.svg" alt="Discarded" class="action-filter"></button>
<button class="filter-btn" data-filter="Kept"><img src="/static/icons/keep.svg" alt="Kept" class="action-filter"></button>
<button class="filter-btn" data-filter="Favourited"><img src="/static/icons/fav.svg" alt="Favourited" class="action-filter"></button>
<button class="filter-btn" data-filter="Reviewing"><img src="/static/icons/review.svg" alt="Reviewing" class="action-filter"></button>
</div>
</div>
<div class="filter-section">
@@ -87,26 +113,58 @@
<button class="filter-btn" data-orientation="square">Square</button>
</div>
</div>
<div class="filter-section">
<h4>NSFW</h4>
<div class="filter-buttons nsfw-filters">
<button class="filter-btn active" data-nsfw="all">All</button>
<button class="filter-btn" data-nsfw="sfw">SFW</button>
<button class="filter-btn" data-nsfw="nsfw">NSFW</button>
</div>
</div>
<div class="filter-section">
<h4>Resolution</h4>
<select id="resolution-filter" class="resolution-select">
<option value="all">All Resolutions</option>
<select id="resolution-select" class="resolution-select sort-select">
<option value="all" selected>All Resolutions</option>
</select>
<div class="resolution-pills keyword-pills-container"></div>
</div>
</div>
<div class="action-buttons history-actions">
<button id="reset-db" class="action-btn reset-btn"><i class="fa-solid fa-trash"></i><span class="label">Reset</span></button>
<button id="select-all" class="action-btn select-btn"><i class="fa-solid fa-check-double"></i><span class="label">Select All</span></button>
<button id="deselect-all" class="action-btn select-btn"><i class="fa-regular fa-square"></i><span class="label">Deselect All</span></button>
<button id="download-selected" class="action-btn download-btn" disabled><i class="fa-solid fa-download"></i><span class="label">Download</span></button>
</div>
<!-- Sort controls -->
<div class="sort-section">
<label for="sort-field">Sort by:</label>
<select id="sort-field" class="sort-select">
<option value="swipe" selected>Swipe Date</option>
<option value="created">Created Date</option>
<option value="width">Width</option>
<option value="height">Height</option>
</select>
<button id="sort-direction" class="sort-dir-btn" title="Toggle sort direction">&#9660;</button>
<!-- action buttons beside sort -->
<button id="toggle-blur" class="action-btn compact" title="Toggle NSFW Blur"><img src="static/icons/18.svg" class="btn-icon nsfw-icon" alt="Blur"></button>
<button id="reset-db" class="action-btn reset-btn compact"><img src="static/icons/db-clear.svg" class="btn-icon" alt="Reset DB"></button>
<button id="select-all" class="action-btn select-btn compact"><img src="static/icons/select-all.svg" class="btn-icon" alt="Select All"></button>
<button id="deselect-all" class="action-btn select-btn compact"><img src="static/icons/select-none.svg" class="btn-icon" alt="Deselect"></button>
<button id="download-selected" class="action-btn download-btn compact" disabled><img src="static/icons/zip.svg" class="btn-icon" alt="Download"><span class="count">0</span></button>
</div>
<div id="selection-grid" class="selection-grid">
<div class="no-selections">Loading selections...</div>
</div>
</div>
<div id="view-modal" class="modal">
<div class="modal-content">
<img id="view-image" src="" alt="Full view" style="max-width:100%;height:auto;">
<p id="view-filename"></p>
<p id="view-resolution"></p>
<p id="view-created"></p>
<pre id="view-prompt" style="white-space:pre-wrap"></pre>
<button id="close-view-modal" class="cancel-button">Close</button>
</div>
</div>
<script src="js/history.js" type="module"></script>
</body>
</body>
</html>