Open Source
This commit is contained in:
67
frontend/v1/index.html
Normal file
67
frontend/v1/index.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta charset="UTF-8" />
|
||||
<title>Kenney Asset Gallery</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lightgallery.min.css"
|
||||
integrity="sha512-QMCloGTsG2vNSnHcsxYTapI6pFQNnUP6yNizuLL5Wh3ha6AraI6HrJ3ABBaw6SIUHqlSTPQDs/SydiR98oTeaQ=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/lightgallery.min.js"
|
||||
integrity="sha512-n02TbYimj64qb98ed5WwkNiSw/i9Xlvv4Ehvhg0jLp3qMAMWCYUHbOMbppZ0vimtyiyw9NqNqxUZC4hq86f4aQ=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-zoom.min.css"
|
||||
integrity="sha512-S/hU6dGSK3D7SRpCvRF/IEufIr6Ikgp5vDiJarhdeFGEnw36hWZ6gVBjnwBbzjA+NEP7D8Gdm+5LL1HEsyiB1w=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/plugins/zoom/lg-zoom.min.js"
|
||||
integrity="sha512-fwxc/NvaA3du4ZRE6J/Ilrqi2xwOB1QfHBR4neA+ha13/pkweiRfPgBiV4VbfAf/Vi3rXAXdQ3zexUJ1V2bWrg=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css"
|
||||
integrity="sha512-rKuOh3xlF/027KUPuMok0ESsZ2zWPRzkniD3n5zZKCAtbiVkYw66DR4KtVAGf8dLPLr5DdyQs05BlSmEyXctkQ=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/plugins/thumbnail/lg-thumbnail.min.js"
|
||||
integrity="sha512-jZxB8WysJ6S6e4Hz5IZpAzR1WiflBl0hBxriHGlLkUN32T18+rD1aLNifa1KTll/zx8lIfWVP1NqEjHi/Khy5w=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>🎮 Kenney Asset Gallery</h1>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div id="filters">
|
||||
<label for="categoryFilter">选择分类：</label>
|
||||
<select name="categoryFilter" id="categoryFilter">
|
||||
<option value="all">📂 所有分类</option>
|
||||
</select>
|
||||
<label for="tagFilter">选择标签：</label>
|
||||
<select name="tagFilter" id="tagFilter">
|
||||
<option value="all">🏷️ 所有标签</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="gallery"></div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
98
frontend/v1/script.js
Normal file
98
frontend/v1/script.js
Normal file
@@ -0,0 +1,98 @@
|
||||
let allData = [];
|
||||
|
||||
function sanitize(str) {
|
||||
return str.replaceAll("\\", "/");
|
||||
}
|
||||
|
||||
function populateFilters(data) {
|
||||
const catSet = new Set();
|
||||
const tagSet = new Set();
|
||||
|
||||
data.forEach(item => {
|
||||
catSet.add(item.properties?.Category?.[0]);
|
||||
(item.properties?.Tags || []).forEach(tag => tagSet.add(tag));
|
||||
});
|
||||
|
||||
const catFilter = document.getElementById("categoryFilter");
|
||||
[...catSet].sort().forEach(cat => {
|
||||
const option = document.createElement("option");
|
||||
option.value = cat;
|
||||
option.textContent = cat;
|
||||
catFilter.appendChild(option);
|
||||
});
|
||||
|
||||
const tagFilter = document.getElementById("tagFilter");
|
||||
[...tagSet].sort().forEach(tag => {
|
||||
const option = document.createElement("option");
|
||||
option.value = tag;
|
||||
option.textContent = tag;
|
||||
tagFilter.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function render(data) {
|
||||
const gallery = document.getElementById("gallery");
|
||||
gallery.innerHTML = ""; // clear
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const images = (item.images || []).map(sanitize);
|
||||
const tags = (item.properties?.Tags || []).join(', ');
|
||||
const category = item.properties?.Category?.[0] || 'Uncategorized';
|
||||
const downloadPath = sanitize(item.download);
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
card.setAttribute("data-category", category);
|
||||
card.setAttribute("data-tags", tags);
|
||||
|
||||
const galleryGroupId = `gallery-${index}`;
|
||||
card.innerHTML = `
|
||||
<div class="lg-gallery" id="${galleryGroupId}">
|
||||
<a href="${images[0]}" data-lg-size="1400-800">
|
||||
<img src="${images[0]}" alt="${item.title}">
|
||||
</a>
|
||||
${images.slice(1).map(img => `
|
||||
<a href="${img}" data-lg-size="1400-800" style="display:none;"></a>
|
||||
`).join("")}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">${item.title}</div>
|
||||
<div class="card-tags">Tags: ${tags}</div>
|
||||
<div class="card-footer">
|
||||
<a class="download-btn" href="${downloadPath}" download>⬇️ 下载资源</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
gallery.appendChild(card);
|
||||
|
||||
// 初始化 lightGallery
|
||||
lightGallery(document.getElementById(galleryGroupId), {
|
||||
selector: 'a',
|
||||
thumbnail: true,
|
||||
zoom: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function filterGallery() {
|
||||
const cat = document.getElementById("categoryFilter").value;
|
||||
const tag = document.getElementById("tagFilter").value;
|
||||
|
||||
const filtered = allData.filter(item => {
|
||||
const matchCat = (cat === 'all') || (item.properties?.Category?.[0] === cat);
|
||||
const matchTag = (tag === 'all') || (item.properties?.Tags || []).includes(tag);
|
||||
return matchCat && matchTag;
|
||||
});
|
||||
|
||||
render(filtered);
|
||||
}
|
||||
|
||||
fetch("data/kenney_data_local.json")
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
allData = data;
|
||||
populateFilters(data);
|
||||
render(data);
|
||||
document.getElementById("categoryFilter").addEventListener("change", filterGallery);
|
||||
document.getElementById("tagFilter").addEventListener("change", filterGallery);
|
||||
});
|
||||
82
frontend/v1/style.css
Normal file
82
frontend/v1/style.css
Normal file
@@ -0,0 +1,82 @@
|
||||
body {
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.8rem;
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background: #45a049;
|
||||
}
|
||||
|
||||
#filters {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
Reference in New Issue
Block a user