Basically wrote the whole thing.
This commit is contained in:
92
history.html
92
history.html
@@ -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">▼</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>
|
||||
|
||||
Reference in New Issue
Block a user