windenbro downloads

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- material icons -->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <title>windenbro | downloads</title>

    <style>
:root {
  --background: #1b1b1b;
  --card: #282626;
  --accent: #413a3a;
  --text: #b5aea4;

  --radius: 5px;
}

/* MAIN STYLES */

* {
  color: var(--text);
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--background);
}

/* NAV STYLES */

header {
  background: var(--card);
  position: fixed;
  width: 100%;
  padding: 25px 40px;
  top: 0;
  border-bottom: 1px solid var(--accent);
}

header h1 {
  font-weight: bold;
  margin-bottom: 15px;
  display: inline;
}

header h1::before {
  position: relative;
  font-family: "Material Icons";
  content: "\E87C";
  border: 1px solid var(--accent);
  padding: 8px;
  border-radius: 5px;
  bottom: -4px;
  margin-right: 10px;
}

header span {
  display: inline;
  font-weight: 100;
  margin-left: 10px;
}

nav {
  width: 100%;
  position: fixed;
  top: 90px;
  background: var(--card);
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

nav ul li {
  padding: 15px 20px;
  margin: 10px 0;
  border-radius: var(--radius);
  list-style-type: none;
}

/* CARDS */

#card-container {
  display: flex;
  width: 80vw;
  margin: 0 auto;
  margin-top: 90px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 100px 0;
}

.card {
  width: 250px;
  height: 300px;
  margin-bottom: 20px;
  border-radius: var(--radius);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--accent);
  padding: 5px;
  transition: 0.2s ease-in-out;
}

.card img:hover {
  padding: 0px;
}

.card h3 {
  text-transform: uppercase;
}

/* MISC */

.hide {
  display: none;
}

.show {
  display: block;
}

.active {
  background: var(--accent);
}
    </style>
  </head>
  <body>
    <header>
      <h1>windenbro.</h1>
      <span>[downloads]</span>
    </header>
    <nav>
      <ul>
        <li class="filter-button active" data-filter-attribute="all">All</li>
        <li class="filter-button" data-filter-attribute="cas">CAS</li>
        <li class="filter-button" data-filter-attribute="bb">Build/Buy</li>
        <li class="filter-button" data-filter-attribute="sim">Sims</li>
      </ul>
    </nav>
    <div id="card-container"></div>
    <script>
      const cardData = [
  {
    image: "https://64.media.tumblr.com/460bf95618b6ec0b13eb723e858a29d0/22ff8fa12b561e4a-4a/s400x600/cfd38fcabb4c00f4092c87ef441f2b5b467ea96f.pnj",
    title: "simtimates+",
    link: "/",
    categories: ["cas"],
  },
  {
    image: "https://64.media.tumblr.com/b567b34b54937b5d746978c510a012c4/22ff8fa12b561e4a-b8/s400x600/851b16ac93dee64e6eeafc9eb68d82b4ab80e47c.pnj",
    title: "butch",
    link: "/",
    categories: ["cas"],
  },
  {
    image: "https://64.media.tumblr.com/cbd12b164e250f3f365f35a82447b514/22ff8fa12b561e4a-dd/s400x600/1e471884221e39f8f4cd5e6aad38557f9935c4ad.pnj",
    title: "micro tank",
    link: "/",
    categories: ["cas"],
  },
  {
    image: "https://64.media.tumblr.com/7989cc3b88ccacb8fb105b3b4c3e6efa/22ff8fa12b561e4a-6f/s400x600/93b9868851f6e733f9de1901915adb7b93962ec6.pnj",
    title: "who wears (short) shorts",
    link: "/",
    categories: ["cas"],
  },
  {
    image: "https://64.media.tumblr.com/b2eab2e680056f0666e3c17f35b79eca/22ff8fa12b561e4a-8c/s400x600/13add983d9c2b8bbbe964eadec7036662a4360bb.pnj",
    title: "caleb underwood",
    link: "/",
    categories: ["sim"],
  },
  {
    image: "https://64.media.tumblr.com/8ed6c3c75ee421a301ffb49dee35bd60/22ff8fa12b561e4a-60/s400x600/9c90f9bfadd69ef707c7c2f3147d7cea07aafc26.pnj",
    title: "interlude",
    link: "/",
    categories: ["cas"],
  },
];

const createCards = () => {
  let cardHtml = "";
  cardData.forEach((card) => {
    const categories = card.categories.toString();
    cardHtml += '<div class="card" data-categories="'+ categories +'">' +
            '<a href="' + card.link + '">' +
                '<img src="'+ card.image +'" alt="' + card.title + '">' +
            '</a>' +
            '<h3>' + card.title + '</h3>' +
        '</div>';
  });
  return cardHtml;
};

const appendCards = () => {
  const cardHtmlString = createCards();
  const container = document.querySelector("#card-container");
  container.innerHTML = cardHtmlString;
};

const addListenerToFilterButtons = () => {
  const filterButtons = document.querySelectorAll(".filter-button");

  filterButtons.forEach((button) => {
    button.addEventListener("click", onFilter);
  });
};

const onFilter = (event) => {
  const filterAttr = event.target.dataset.filterAttribute;
  const cardNodes = document.querySelectorAll(".card");
  updateActiveButton(filterAttr);
  if (filterAttr === "all") {
    cardNodes.forEach((node) => {
      node.classList.remove("hide");
    });
  } else {
    cardNodes.forEach((node) => {
      const cardCategories = node.dataset.categories;
      if (!cardCategories.includes(filterAttr)) {
        node.classList.add("hide");
        node.classList.remove("show");
      } else if (cardCategories.includes(filterAttr)) {
        node.classList.remove("hide");
        node.classList.add("show");
      }
    });
  }
};

const updateActiveButton = (target) => {
  const filterButtons = document.querySelectorAll(".filter-button");
  filterButtons.forEach((btn) => {
    if (btn.dataset.filterAttribute != target) {
      btn.classList.remove("active");
    } else if (btn.dataset.filterAttribute === target) {
      btn.classList.add("active");
    }
  });
};

document.addEventListener("DOMContentLoaded", () => {
  appendCards();
  addListenerToFilterButtons();
});

    </script>
  </body>
</html>