290 lines
8.0 KiB
HTML
290 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BR0TCRAFT | Assets</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;600;800&family=Orbitron:wght@700&display=swap"
|
|
rel="stylesheet">
|
|
<style>
|
|
.license-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: rgba(255, 77, 77, 0.07);
|
|
border: 1px solid rgba(255, 77, 77, 0.2);
|
|
border-radius: 6px;
|
|
padding: 0.4rem 0.9rem;
|
|
font-family: var(--font-code);
|
|
font-size: 0.78rem;
|
|
color: var(--accent-primary);
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.assets-intro {
|
|
max-width: 600px;
|
|
color: var(--text-muted);
|
|
line-height: 1.75;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.assets-intro p {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Asset grid */
|
|
.asset-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 0.75rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.asset-item {
|
|
border: 1px solid #1f1f1f;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.015);
|
|
transition: border-color 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.asset-item:hover {
|
|
border-color: #333;
|
|
}
|
|
|
|
.asset-preview {
|
|
height: 100px;
|
|
background: #111;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.asset-preview img {
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
object-fit: contain;
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
.asset-meta {
|
|
padding: 0.6rem 0.8rem;
|
|
border-top: 1px solid #1a1a1a;
|
|
}
|
|
|
|
.asset-name {
|
|
font-family: var(--font-code);
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.asset-type {
|
|
font-family: var(--font-code);
|
|
font-size: 0.65rem;
|
|
color: #444;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Category filter */
|
|
.filter-row {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.filter-btn {
|
|
background: none;
|
|
border: 1px solid #222;
|
|
border-radius: 4px;
|
|
color: #555;
|
|
font-family: var(--font-code);
|
|
font-size: 0.75rem;
|
|
padding: 0.3rem 0.8rem;
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.filter-btn.active,
|
|
.filter-btn:hover {
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.empty-state {
|
|
color: #444;
|
|
font-family: var(--font-code);
|
|
font-size: 0.85rem;
|
|
padding: 3rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state span {
|
|
display: block;
|
|
font-size: 2rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Info box */
|
|
.info-box {
|
|
border: 1px solid #1e1e1e;
|
|
border-radius: var(--radius);
|
|
padding: 1.25rem 1.5rem;
|
|
background: rgba(255, 255, 255, 0.015);
|
|
max-width: 600px;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.info-box h4 {
|
|
font-family: var(--font-code);
|
|
font-size: 0.78rem;
|
|
color: var(--accent-primary);
|
|
margin-bottom: 0.6rem;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.info-box p {
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
line-height: 1.65;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
<div class="brand">BR0TCRAFT</div>
|
|
<div class="nav-links">
|
|
<a href="index.html">Home</a>
|
|
<a href="projects.html">Projekte</a>
|
|
<a href="tutorials.html">Dev Notes</a>
|
|
<a href="about.html">About</a>
|
|
<a href="assets.html" class="active">Assets</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<section class="section">
|
|
<h1 style="font-family: var(--font-display); margin-bottom: 1.25rem; color: #fff;">Assets</h1>
|
|
|
|
<div class="license-badge">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 8v4m0 4h.01" />
|
|
</svg>
|
|
CC0 Public Domain
|
|
</div>
|
|
|
|
<div class="assets-intro">
|
|
<p>
|
|
Icons, Grafiken und kleine UI-Assets, die ich für eigene Projekte erstellt oder gesammelt habe.
|
|
Alles steht unter <strong style="color:#fff">CC0</strong>,
|
|
keine Namensnennung erforderlich, keine Einschränkungen bei der Nutzung.
|
|
</p>
|
|
<p>
|
|
Der Grund ist eigentlich ganz einfach. Ich nutze selbst viele freie Ressourcen anderer Leute.
|
|
Durch die Assets möchte ich auch etwas zurückgeben und das so unkompliziert wie möglich.
|
|
</p>
|
|
<p>
|
|
Mitnehmen, anpassen, verwenden.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="filter-row">
|
|
<button class="filter-btn active" onclick="filterAssets('all', this)">Alle</button>
|
|
<button class="filter-btn" onclick="filterAssets('icon', this)">Icons</button>
|
|
<button class="filter-btn" onclick="filterAssets('texture', this)">Texturen</button>
|
|
<button class="filter-btn" onclick="filterAssets('ui', this)">UI</button>
|
|
</div>
|
|
|
|
<div class="asset-grid" id="assetGrid">
|
|
|
|
<div class="asset-item" data-category="icon">
|
|
<div class="asset-preview">🔧</div>
|
|
<div class="asset-meta">
|
|
<div class="asset-name">tool.svg</div>
|
|
<div class="asset-type">SVG · Icon</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-category="icon">
|
|
<div class="asset-preview">⚙️</div>
|
|
<div class="asset-meta">
|
|
<div class="asset-name">settings.svg</div>
|
|
<div class="asset-type">SVG · Icon</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-category="ui">
|
|
<div class="asset-preview">🎨</div>
|
|
<div class="asset-meta">
|
|
<div class="asset-name">button-set.png</div>
|
|
<div class="asset-type">PNG · UI</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-category="texture">
|
|
<div class="asset-preview"
|
|
style="background: repeating-linear-gradient(45deg, #111 0px, #111 2px, #0d0d0d 2px, #0d0d0d 8px);"></div>
|
|
<div class="asset-meta">
|
|
<div class="asset-name">noise-dark.png</div>
|
|
<div class="asset-type">PNG · Textur</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-category="icon">
|
|
<div class="asset-preview">📁</div>
|
|
<div class="asset-meta">
|
|
<div class="asset-name">folder.svg</div>
|
|
<div class="asset-type">SVG · Icon</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="asset-item" data-category="ui">
|
|
<div class="asset-preview" style="background: linear-gradient(135deg, #1a0000, #220000);">
|
|
<div style="width:60%; height:8px; background:#ff4d4d22; border-radius:4px;"></div>
|
|
</div>
|
|
<div class="asset-meta">
|
|
<div class="asset-name">progress-bar.svg</div>
|
|
<div class="asset-type">SVG · UI</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>// Eigene Assets beisteuern?</h4>
|
|
<p>
|
|
Wenn du selbst freie Assets beisteuern willst, meld dich per
|
|
<a href="mailto:info@br0tcraft.de" style="color: var(--accent-primary); text-decoration: none;">Email</a>
|
|
oder über GitHub. CC0 ist Bedingung.
|
|
</p>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
function filterAssets(category, btn) {
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.querySelectorAll('.asset-item').forEach(item => {
|
|
const show = category === 'all' || item.dataset.category === category;
|
|
item.style.display = show ? '' : 'none';
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |