<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>StrikerChamp – Modernes Mockup</title>
<!-- Modernes Font-Paar (optional) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg: #0b0f17;
--panel: rgba(255,255,255,0.06);
--panel-2: rgba(255,255,255,0.10);
--text: rgba(255,255,255,0.92);
--muted: rgba(255,255,255,0.68);
--line: rgba(255,255,255,0.10);
--accent: #7c5cff;
--accent-2: #2ee59d;
--shadow: 0 12px 40px rgba(0,0,0,0.45);
--radius: 16px;
--radius-sm: 12px;
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
margin:0;
background:
radial-gradient(900px 500px at 10% 0%, rgba(124,92,255,0.20), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(46,229,157,0.16), transparent 55%),
radial-gradient(800px 520px at 60% 90%, rgba(124,92,255,0.12), transparent 55%),
var(--bg);
color: var(--text);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
line-height: 1.35;
}
a{ color:inherit; text-decoration:none; }
.container{
width: min(1200px, calc(100% - 40px));
margin: 0 auto;
}
/* Topbar */
.topbar{
position: sticky;
top:0;
z-index: 50;
backdrop-filter: blur(14px);
background: rgba(11,15,23,0.65);
border-bottom: 1px solid var(--line);
}
.topbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding: 14px 0;
}
.brand{
display:flex;
align-items:center;
gap:12px;
min-width: 210px;
}
.logo{
width: 38px; height: 38px;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(124,92,255,1), rgba(46,229,157,1));
box-shadow: 0 12px 25px rgba(124,92,255,0.22);
}
.brand h1{
margin:0;
font-family: Montserrat, Inter, sans-serif;
font-size: 16px;
letter-spacing: 0.2px;
}
.brand small{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.nav{
display:flex;
align-items:center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.nav a{
padding: 9px 12px;
border-radius: 12px;
color: var(--muted);
border: 1px solid transparent;
}
.nav a.active, .nav a:hover{
color: var(--text);
border-color: var(--line);
background: rgba(255,255,255,0.04);
}
.actions{
display:flex;
gap:10px;
align-items:center;
justify-content:flex-end;
min-width: 210px;
}
.btn{
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
color: var(--text);
cursor:pointer;
font-weight: 600;
}
.btn.primary{
border-color: transparent;
background: linear-gradient(135deg, rgba(124,92,255,1), rgba(124,92,255,0.75));
box-shadow: 0 10px 30px rgba(124,92,255,0.22);
}
.btn:active{ transform: translateY(1px); }
/* Hero */
.hero{
padding: 34px 0 18px;
}
.hero-grid{
display:grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 16px;
align-items: stretch;
}
.hero-card{
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
overflow:hidden;
position:relative;
min-height: 220px;
}
.hero-card h2{
font-family: Montserrat, Inter, sans-serif;
margin: 0 0 10px;
font-size: 26px;
letter-spacing: 0.2px;
}
.hero-card p{
margin: 0 0 14px;
color: var(--muted);
max-width: 62ch;
}
.hero-meta{
display:flex;
gap:10px;
flex-wrap: wrap;
margin-top: 10px;
}
.pill{
border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
border-radius: 999px;
padding: 8px 10px;
font-size: 12px;
color: var(--muted);
}
.hero-art{
position:absolute;
inset: -60px -60px auto auto;
width: 280px;
height: 280px;
border-radius: 80px;
background: radial-gradient(circle at 30% 30%, rgba(46,229,157,0.55), transparent 45%),
radial-gradient(circle at 60% 60%, rgba(124,92,255,0.55), transparent 52%);
filter: blur(0px);
opacity: 0.8;
transform: rotate(18deg);
}
.side-card{
border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
display:flex;
flex-direction:column;
gap: 12px;
}
.side-card h3{
margin:0;
font-family: Montserrat, Inter, sans-serif;
font-size: 16px;
}
.side-card .stat{
display:flex;
align-items:baseline;
justify-content:space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.03);
}
.stat b{ font-size: 18px; }
.stat span{ color: var(--muted); font-size: 12px; }
/* Content */
.section{
padding: 12px 0 36px;
}
.toolbar{
display:flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
margin: 8px 0 14px;
}
.search{
flex: 1 1 320px;
display:flex;
align-items:center;
gap: 10px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
}
.search input{
width: 100%;
background: transparent;
border: 0;
outline: none;
color: var(--text);
font-size: 14px;
}
.filters{
display:flex;
gap: 10px;
flex-wrap: wrap;
align-items:center;
justify-content:flex-end;
flex: 1 1 360px;
}
select{
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
color: var(--text);
padding: 11px 12px;
outline:none;
cursor:pointer;
}
/* Cards */
.grid{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
}
.card{
grid-column: span 4;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255,255,255,0.04);
box-shadow: var(--shadow);
overflow:hidden;
display:flex;
flex-direction:column;
min-height: 240px;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
cursor:pointer;
}
.card:hover{
transform: translateY(-2px);
background: rgba(255,255,255,0.055);
border-color: rgba(255,255,255,0.16);
}
.thumb{
height: 120px;
background:
linear-gradient(135deg, rgba(124,92,255,0.35), rgba(46,229,157,0.28)),
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 45%);
display:flex;
align-items:flex-end;
padding: 14px;
}
.badge{
font-size: 12px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(11,15,23,0.35);
color: rgba(255,255,255,0.86);
}
.card-body{
padding: 14px 14px 16px;
display:flex;
flex-direction:column;
gap: 8px;
flex: 1;
}
.card-title{
margin: 0;
font-family: Montserrat, Inter, sans-serif;
font-size: 16px;
}
.card-sub{
color: var(--muted);
font-size: 13px;
margin: 0;
}
.card-actions{
display:flex;
gap: 10px;
margin-top: auto;
align-items:center;
justify-content:space-between;
}
.link{
color: rgba(255,255,255,0.86);
font-weight: 600;
font-size: 13px;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.03);
}
.mini{
color: var(--muted);
font-size: 12px;
}
/* Modal */
dialog{
border: 0;
padding: 0;
border-radius: 18px;
width: min(860px, calc(100% - 20px));
background: rgba(11,15,23,0.92);
color: var(--text);
box-shadow: 0 30px 120px rgba(0,0,0,0.7);
}
dialog::backdrop{
background: rgba(0,0,0,0.58);
backdrop-filter: blur(6px);
}
.modal{
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px;
overflow:hidden;
}
.modal-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 12px;
padding: 16px 16px;
background: rgba(255,255,255,0.04);
border-bottom: 1px solid var(--line);
}
.modal-head h3{
margin: 0;
font-family: Montserrat, Inter, sans-serif;
font-size: 18px;
}
.modal-head p{ margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.x{
border: 1px solid var(--line);
background: rgba(255,255,255,0.04);
color: var(--text);
border-radius: 12px;
padding: 10px 12px;
cursor:pointer;
font-weight:700;
}
.modal-body{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 16px;
padding: 16px;
}
.gallery{
border-radius: 16px;
border: 1px solid var(--line);
background:
linear-gradient(135deg, rgba(124,92,255,0.22), rgba(46,229,157,0.18)),
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), transparent 45%);
min-height: 260px;
padding: 14px;
display:flex;
flex-direction:column;
justify-content:flex-end;
gap: 10px;
}
.gallery .row{
display:flex; gap: 10px; flex-wrap: wrap;
}
.chip{
border: 1px solid rgba(255,255,255,0.16);
background: rgba(0,0,0,0.18);
padding: 7px 10px;
border-radius: 999px;
font-size: 12px;
color: rgba(255,255,255,0.84);
}
.details{
border-radius: 16px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.03);
padding: 14px;
display:flex;
flex-direction:column;
gap: 10px;
}
.kv{
display:flex;
justify-content:space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(255,255,255,0.03);
color: var(--muted);
font-size: 13px;
}
.kv b{ color: var(--text); font-weight: 700; }
.modal-foot{
padding: 14px 16px 16px;
border-top: 1px solid var(--line);
display:flex;
flex-wrap: wrap;
gap: 10px;
justify-content:flex-end;
background: rgba(255,255,255,0.03);
}
/* Responsive */
@media (max-width: 980px){
.hero-grid{ grid-template-columns: 1fr; }
.actions, .brand{ min-width: auto; }
.card{ grid-column: span 6; }
.modal-body{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
.nav{ display:none; }
.card{ grid-column: span 12; }
.topbar-inner{ gap:10px; }
.brand h1{ font-size: 14px; }
}
/* Kleine Helper */
.muted{ color: var(--muted); }
.hidden{ display:none !important; }
</style>
</head>
<body>
<!-- Header / Navigation -->
<header class="topbar">
<div class="container topbar-inner">
<div class="brand">
<div class="logo" aria-hidden="true"></div>
<div>
<h1>StrikerChamp</h1>
<small>Trikots · Tickets · Sammlerstücke</small>
</div>
</div>
<nav class="nav" aria-label="Hauptnavigation">
<a href="#" class="active" data-view="kits">Trikots</a>
<a href="#" data-view="tickets">Tickets</a>
<a href="#" data-view="highlights">Highlights</a>
<a href="#" data-view="about">Über</a>
</nav>
<div class="actions">
<button class="btn" id="toggleView">Ansicht wechseln</button>
<button class="btn primary" id="ctaNew">+ Neu hinzufügen</button>
</div>
</div>
</header>
<!-- Hero -->
<section class="hero">
<div class="container hero-grid">
<div class="hero-card">
<div class="hero-art" aria-hidden="true"></div>
<h2>Eine modernere Präsentation deiner Sammlung</h2>
<p>
Dieses Mockup zeigt, wie StrikerChamp aussehen könnte: klare Navigation, Such- & Filterleiste,
Karten für Teams/Länder und ein Detail-Overlay mit Galerie & Metadaten.
</p>
<div class="hero-meta">
<span class="pill">✅ Mobilfreundlich</span>
<span class="pill">✅ Filter & Suche</span>
<span class="pill">✅ Karten-Layout</span>
<span class="pill">✅ Detail-Modal</span>
</div>
</div>
<aside class="side-card">
<h3>Quick Stats (Demo)</h3>
<div class="stat"><b id="statKits">128</b><span>Trikots</span></div>
<div class="stat"><b id="statTickets">42</b><span>Tickets</span></div>
<div class="stat"><b id="statCountries">19</b><span>Länder</span></div>
<p class="muted" style="margin:0;">
Tipp: Klicke auf eine Karte, um die Detailansicht zu sehen.
</p>
</aside>
</div>
</section>
<!-- Main -->
<main class="section">
<div class="container">
<!-- Toolbar -->
<div class="toolbar">
<div class="search" role="search">
<span class="muted" aria-hidden="true">?</span>
<input id="q" type="search" placeholder="Suchen: Team, Land, Liga, Jahr …" autocomplete="off">
</div>
<div class="filters" aria-label="Filter">
<select id="fType" title="Typ">
<option value="all">Alles</option>
<option value="kit" selected>Trikots</option>
<option value="ticket">Tickets</option>
</select>
<select id="fCountry" title="Land">
<option value="all">Alle Länder</option>
</select>
<select id="fLeague" title="Liga">
<option value="all">Alle Ligen</option>
</select>
</div>
</div>
<!-- Grid -->
<div class="grid" id="grid" aria-live="polite"></div>
<p class="muted" id="empty" style="margin:16px 0 0; display:none;">
Keine Treffer. Versuche andere Filter oder einen anderen Suchbegriff.
</p>
</div>
</main>
<!-- Detail Modal -->
<dialog id="detailDialog" aria-label="Details">
<div class="modal">
<div class="modal-head">
<div>
<h3 id="dTitle">—</h3>
<p id="dSub">—</p>
</div>
<button class="x" id="closeDialog" aria-label="Schließen">✕</button>
</div>
<div class="modal-body">
<div class="gallery" id="dGallery">
<div class="row" id="dChips"></div>
<div class="row">
<span class="chip">Galerie-Platzhalter</span>
<span class="chip">Hier könnten echte Bilder</span>
<span class="chip">als Carousel/Lightbox rein</span>
</div>
</div>
<div class="details">
<div class="kv"><span>Typ</span><b id="dType">—</b></div>
<div class="kv"><span>Land</span><b id="dCountry">—</b></div>
<div class="kv"><span>Liga/Turnier</span><b id="dLeague">—</b></div>
<div class="kv"><span>Saison/Jahr</span><b id="dYear">—</b></div>
<div class="kv"><span>Notizen</span><b id="dNote">—</b></div>
<p class="muted" style="margin:6px 0 0;">
In echt könntest du hier Links zu deinen bestehenden Detailseiten setzen (z. B. Germany.htm),
oder alles in einer Datenbank (CMS) pflegen.
</p>
</div>
</div>
<div class="modal-foot">
<button class="btn" id="copyLink">Link kopieren (Demo)</button>
<button class="btn primary" id="openItem">Zur Detailseite (Demo)</button>
</div>
</div>
</dialog>
<script>
// Demo-Daten: ersetze später durch deine echten Teams/Seiten/Bilder
const ITEMS = [
{ id:"kit-bvb-2013", type:"kit", title:"Borussia Dortmund", sub:"Home Shirt", country:"Deutschland", league:"Bundesliga", year:"2012/13", note:"Beispiel: CL-Finale Saison", tags:["gelb","nike","home"], url:"#"},
{ id:"kit-fcb-2020", type:"kit", title:"FC Bayern München", sub:"Third Kit", country:"Deutschland", league:"Bundesliga", year:"2019/20", note:"Beispiel: Triple-Saison", tags:["adidas","third"], url:"#"},
{ id:"kit-ars-2004", type:"kit", title:"Arsenal", sub:"Home Shirt", country:"England", league:"Premier League", year:"2003/04", note:"Beispiel: Invincibles", tags:["home","classic"], url:"#"},
{ id:"kit-fcb-2011", type:"kit", title:"FC Barcelona", sub:"Away Shirt", country:"Spanien", league:"La Liga", year:"2010/11", note:"Beispiel: Guardiola-Ära", tags:["away","classic"], url:"#"},
{ id:"ticket-berlin-derby", type:"ticket", title:"Hertha vs Union", sub:"Ticket", country:"Deutschland", league:"Bundesliga", year:"2022", note:"Beispiel: Derby", tags:["ticket","stadion"], url:"#"},
{ id:"ticket-ucl", type:"ticket", title:"UEFA Champions League", sub:"Match Ticket", country:"Europa", league:"UCL", year:"2013", note:"Beispiel: Viertelfinale", tags:["ticket","ucl"], url:"#"},
{ id:"kit-juve-2017", type:"kit", title:"Juventus", sub:"Home Shirt", country:"Italien", league:"Serie A", year:"2016/17", note:"Beispiel: Scudetto", tags:["home"], url:"#"},
{ id:"kit-ajax-1995", type:"kit", title:"Ajax", sub:"Home Shirt", country:"Niederlande", league:"Eredivisie", year:"1994/95", note:"Beispiel: CL-Sieg", tags:["classic","home"], url:"#"},
{ id:"kit-boca-2000", type:"kit", title:"Boca Juniors", sub:"Home Shirt", country:"Argentinien", league:"Primera División", year:"2000", note:"Beispiel: Interkontinental", tags:["home"], url:"#"},
];
const elGrid = document.getElementById("grid");
const elEmpty = document.getElementById("empty");
const elQ = document.getElementById("q");
const elType = document.getElementById("fType");
const elCountry = document.getElementById("fCountry");
const elLeague = document.getElementById("fLeague");
const dialog = document.getElementById("detailDialog");
const viewButtons = [...document.querySelectorAll(".nav a")];
let currentView = "kits"; // kits | tickets | highlights | about
function uniq(arr){ return [...new Set(arr)].sort((a,b)=>a.localeCompare(b)); }
function buildFilters(){
const countries = uniq(ITEMS.map(x=>x.country));
const leagues = uniq(ITEMS.map(x=>x.league));
countries.forEach(c=>{
const o = document.createElement("option");
o.value = c; o.textContent = c;
elCountry.appendChild(o);
});
leagues.forEach(l=>{
const o = document.createElement("option");
o.value = l; o.textContent = l;
elLeague.appendChild(o);
});
}
function matchesView(item){
if(currentView === "kits") return item.type === "kit";
if(currentView === "tickets") return item.type === "ticket";
if(currentView === "highlights") return ["kit","ticket"].includes(item.type); // Demo
if(currentView === "about") return false;
return true;
}
function filterItems(){
const q = elQ.value.trim().toLowerCase();
const t = elType.value;
const c = elCountry.value;
const l = elLeague.value;
return ITEMS.filter(it=>{
if(!matchesView(it)) return false;
if(t !== "all" && it.type !== t) return false;
if(c !== "all" && it.country !== c) return false;
if(l !== "all" && it.league !== l) return false;
if(q){
const hay = `${it.title} ${it.sub} ${it.country} ${it.league} ${it.year} ${it.note} ${(it.tags||[]).join(" ")}`.toLowerCase();
if(!hay.includes(q)) return false;
}
return true;
});
}
function render(){
if(currentView === "about"){
elGrid.innerHTML = `
<div class="card" style="grid-column: span 12; cursor: default;">
<div class="thumb"><span class="badge">Über dieses Mockup</span></div>
<div class="card-body">
<h3 class="card-title">Wie sich das modern anfühlt</h3>
<p class="card-sub">
Statt vieler Textlinks: klare Navigation, Karten mit visueller Hierarchie,
Suche & Filter, und eine Detailansicht als Overlay.
<br><br>
Das ist nur ein UI-Modell — du kannst daraus echte Seiten bauen
(z. B. statisch, mit CMS, oder als kleine App).
</p>
<div class="card-actions">
<span class="mini">Tipp: Wechsle oben zurück zu „Trikots“.</span>
<a class="link" href="#" onclick="return false;">Kontakt (Demo)</a>
</div>
</div>
</div>
`;
elEmpty.style.display = "none";
return;
}
const items = filterItems();
elGrid.innerHTML = "";
if(items.length === 0){
elEmpty.style.display = "block";
return;
}
elEmpty.style.display = "none";
for(const it of items){
const card = document.createElement("div");
card.className = "card";
card.innerHTML = `
<div class="thumb">
<span class="badge">${it.type === "kit" ? "Trikot" : "Ticket"} · ${it.league}</span>
</div>
<div class="card-body">
<h3 class="card-title">${escapeHtml(it.title)}</h3>
<p class="card-sub">${escapeHtml(it.sub)} · ${escapeHtml(it.country)} · <span class="muted">${escapeHtml(it.year)}</span></p>
<div class="card-actions">
<span class="mini">${escapeHtml(it.note)}</span>
<a class="link" href="#" onclick="return false;">Details →</a>
</div>
</div>
`;
card.addEventListener("click", ()=> openDetails(it));
elGrid.appendChild(card);
}
}
function openDetails(it){
document.getElementById("dTitle").textContent = it.title;
document.getElementById("dSub").textContent = `${it.sub} · ${it.league} · ${it.year}`;
document.getElementById("dType").textContent = it.type === "kit" ? "Trikot" : "Ticket";
document.getElementById("dCountry").textContent = it.country;
document.getElementById("dLeague").textContent = it.league;
document.getElementById("dYear").textContent = it.year;
document.getElementById("dNote").textContent = it.note || "—";
const chips = document.getElementById("dChips");
chips.innerHTML = "";
(it.tags || []).slice(0,6).forEach(tag=>{
const s = document.createElement("span");
s.className = "chip";
s.textContent = `#${tag}`;
chips.appendChild(s);
});
document.getElementById("openItem").onclick = () => {
alert("Demo: Hier würdest du auf deine echte Detailseite verlinken.\n\nZiel-URL könnte z.B. eine Teamseite oder ein Datensatz sein.");
};
document.getElementById("copyLink").onclick = async () => {
const fake = `https://www.strikerchamp.com/item/${it.id}`;
try{
await navigator.clipboard.writeText(fake);
alert("Kopiert (Demo): " + fake);
}catch(e){
alert("Kopieren nicht möglich. Demo-Link:\n" + fake);
}
};
dialog.showModal();
}
function escapeHtml(str){
return (str ?? "").replace(/[&<>"']/g, m => ({
"&":"&","<":"<",">":">",'"':""","'":"'"
}[m]));
}
// Navigation
viewButtons.forEach(a=>{
a.addEventListener("click", (e)=>{
e.preventDefault();
currentView = a.dataset.view;
viewButtons.forEach(x=>x.classList.toggle("active", x===a));
// Default Typ-Filter passend setzen
if(currentView === "kits") elType.value = "kit";
if(currentView === "tickets") elType.value = "ticket";
if(currentView === "highlights") elType.value = "all";
render();
});
});
document.getElementById("closeDialog").addEventListener("click", ()=> dialog.close());
dialog.addEventListener("click", (e)=>{
// Klick außerhalb schließt
const rect = dialog.getBoundingClientRect();
const inDialog = (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom);
if(!inDialog) dialog.close();
});
// Toolbar interactions
[elQ, elType, elCountry, elLeague].forEach(el => el.addEventListener("input", render));
elQ.addEventListener("keydown", (e)=>{ if(e.key==="Escape"){ elQ.value=""; render(); }});
// Kleine Demo-Buttons
document.getElementById("ctaNew").addEventListener("click", ()=>{
alert("Demo: Hier könnte ein Admin-Formular/Upload oder ein „Neuer Eintrag“-Dialog sein.");
});
let dense = false;
document.getElementById("toggleView").addEventListener("click", ()=>{
dense = !dense;
document.body.style.fontSize = dense ? "14px" : "";
alert("Demo: Ansicht gewechselt (hier nur Schriftgröße). In echt: Grid-Dichte / List-View / große Thumbnails.");
});
buildFilters();
render();
</script>
</body>
</html>