危LOVE

i made a digital photocard binder that you can use to keep track of them in your website :3 please do not delete the credits!!! feel free to use it as you want and edit it to suit your needs, just keep a link to my site

pcbinder.html

<!--

base code credits: rai (https://abulove.neocities.org/) ♫

..,,,,,..
    .,;;;;;;;;;;;;;;,.
  ,;;;'            `;;;;,       ,,
 ,;'                 ';;;;,    ;;;;
.;.;;;;,               ;;;;;.   ''
;;;;;;;;                ;;;;;                ASCII art from https://www.asciiart.eu, author not specified
`;;;;;;'                ;;;;;
                        ;;;;'   ,,
                      .;;;;'   ;;;;
                     ,;;;'      ''
                   ,;;;'
                ,;;;'
            .;;;;'
        .,;;;''
    .,;;''

-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>your website's name here!!!</title>
    
    <link href="pcbinder.css" rel="stylesheet" type="text/css" media="all">
    
    
  </head>
<body>

<div class="controls-area">
      <h1><h1>photocard collection!!</h1>
      
      
      
      
      <div class="filters">
        <select id="filter-era">
          <option value="">all eras!!</option>
          <option value="era1">name your era here</option>
          <option value="era2">era number 2!!!</option>
          
        </select>

<select id="filter-type">
          <option value="">all types!!</option>
          <option value="album">album</option>
          <option value="pob">pob</option>
          <option value="luckydraw">lucky draw</option>
          <option value="other">other</option>
        </select>

<select id="filter-have">
          <option value="">all!!</option>
          <option value="owned">owned</option>
          <option value="missing">missing</option>
        </select>
      </div>
    </div>

<div class="container">
      <div class="scene">
          <div class="binder" id="binder"></div>
      </div>
    </div>

<div id="source-data" style="display: none;">
      
      <img id="cover-front-img" src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg">
      <img id="inside-front-img" src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg">
      
      <img id="cover-back-img" src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg">
      <img id="inside-back-img" src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg">

<img src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg" data-title="here goes the title" data-era="era1" data-type="album" data-have="owned" data-date="30 february 2067">
      <img src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg" data-title="i'm 2" data-era="era1" data-type="album" data-have="owned" data-date="30 february 2067">
      <img src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg" data-title="i'm 3" data-era="era2" data-type="album" data-have="owned" data-date="30 february 2067">
      <img src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg" data-title="i'm 4" data-era="era1" data-type="pob" data-have="owned" data-date="30 february 2067">
      <img src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg" data-title="i'm 5" data-era="era1" data-type="album" data-have="missing" data-date="not owned :c">
      <img src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg" data-title="i'm 6" data-era="era1" data-type="album" data-have="owned" data-date="30 february 2067">
      <img src="https://i.pinimg.com/1200x/8d/72/ea/8d72ea7a2807e0476808a964b820a3ba.jpg" data-title="SIX SEVEEEEN" data-era="era2" data-type="pob" data-have="missing" data-date="not owned :c">
    </div>

<div class="imageWrapper" id="wrapper">
      <button class="nav-btn prev-btn">❮</button>
        <div class="modalContent">
          <img src="" id="fullImg">
          <div class="infoText">
            <h2 id="pcTitle"></h2>
            <p id="pcData"></p>
          </div>
      </div>
      <button class="nav-btn next-btn">❯</button>
    </div>

pcbinder.css

base code credits: rai (https://abulove.neocities.org/) ♫

.container {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scene {
    width: 800px;
    height: 533px;
    perspective: 2000px;
    position: relative;
    margin-top: 20px;
}

.binder {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.page {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.page.flipped {
    transform: rotateY(-180deg);
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-color: #ffffff;
    border-radius: 0 15px 15px 0;
    box-shadow: inset 5px 0 10px rgba(0,0,0,0.05), 0 0 5px rgba(0,0,0,0.1);
    
    /* grid layout for photocard pockets */
    display: grid;
    grid-template-columns: 1fr 1fr; /* if you want 9 pcs per face, change to 1fr 1fr 1fr. if you want one, 1fr */
    grid-template-rows: 1fr 1fr; /* if you want 9 pcs per face, change to 1fr 1fr 1fr. if you want one, 1fr */
    padding: 25px;
    gap: 15px;
    box-sizing: border-box;
    justify-items: center;
    align-items: center;
}

.face.back {
    transform: rotateY(180deg);
    border-radius: 15px 0 0 15px;
    box-shadow: inset -5px 0 10px rgba(0,0,0,0.05), 0 0 5px rgba(0,0,0,0.1);
    background-color: #fcfcfc;
}

/* each photocard pocket */
.pocket {
    width: 100%;
    height: 100%;
    background: #eee;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    aspect-ratio: 55 / 85;
    transition: transform 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pocket img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pocket.missing img {
    filter: grayscale(100%) opacity(0.5);
}

.pocket:hover { transform: scale(1.05); z-index: 5; }

.empty-slot {
    width: 100%; height: 100%;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-size: 0.8rem;
}

.imageWrapper {
    width: 100%; height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    position: fixed; top: 0; left: 0;
    display: none;
    justify-content: center; align-items: center;
    z-index: 200;
}
.modalContent {
    background: #fff; padding: 20px;
    border-radius: 10px; text-align: center;
    position: relative;
    max-width: 90%;
}
.modalContent img { max-height: 500px; max-width: 100%; }

.page.cover .face {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-color: #7475bb;
    overflow: hidden;
}

.cover-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 15px 15px 0;
    background-color: #7475bb;
}

.face.back .cover-full-img {
    border-radius: 15px 0 0 15px;
    background-color: #7475bb;
}

.inside-binder {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    background-size: 20px 20px;
}

.nav-btn {
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    padding: 10px;
}

.prev-btn {
    position: absolute;
    left: 5%;
}

.next-btn {
    position: absolute;
    right: 5%;
}

pcbinder.js

base code credits: rai (https://abulove.neocities.org/) ♫

document.addEventListener("DOMContentLoaded", () => {
    const sourceImages = Array.from(document.querySelectorAll("#source-data img"));
    const binder = document.getElementById("binder");

const wrapper = document.getElementById("wrapper");
    const fullImg = document.getElementById("fullImg");
    const pcTitle = document.getElementById("pcTitle");
    const pcData = document.getElementById("pcData");

const prevBtn = document.querySelector(".prev-btn");
    const nextBtn = document.querySelector(".next-btn");

let currentIndex = 0;
    let currentGalleryList = [];

function renderBinder() {
        const eraFilter = document.getElementById("filter-era").value;
        const typeFilter = document.getElementById("filter-type").value;
        const haveFilter = document.getElementById("filter-have").value;
        //add more if you add more filters

const filteredImgs = sourceImages.filter(img => {
            // excludes covers
            if(img.id === 'cover-front-img' || img.id === 'cover-back-img') return false;

const matchEra = !eraFilter || img.dataset.era === eraFilter;
            const matchType = !typeFilter || img.dataset.type === typeFilter;
            const matchHave = !haveFilter || img.dataset.have === haveFilter;
            //add more if you add more filters
            return matchEra && matchType && matchHave; //same here
        });

currentGalleryList = filteredImgs;

binder.innerHTML = "";
        
        // this is how many photocards we want per page (both sides combined!! by putting 8 you get 4 on front and 4 on back)
        //if you want 9 pcs per face, change itemsPerPage to 18
        //same with 1 pc per face, change to 2
        const itemsPerPage = 8;

const contentSheets = Math.ceil(filteredImgs.length / itemsPerPage);

let pagesToCreate = [];

pagesToCreate.push({
            type: 'cover-front',
            content: document.getElementById('cover-front-img').src
        });

if (filteredImgs.length === 0) {
            pagesToCreate.push({ type: 'empty-msg' });
        } else {
            for (let i = 0; i < contentSheets; i++) {
                const start = i * itemsPerPage;
                const end = start + itemsPerPage;
                pagesToCreate.push({
                    type: 'content',
                    images: filteredImgs.slice(start, end)
                });
            }
        }

pagesToCreate.push({
            type: 'cover-back',
            content: document.getElementById('cover-back-img').src
        });

pagesToCreate.forEach((pageData, index) => {
            const pageDiv = document.createElement("div");
            pageDiv.className = "page";
            if (pageData.type.includes('cover')) pageDiv.classList.add("cover");
            
            pageDiv.style.zIndex = pagesToCreate.length - index;

const frontFace = document.createElement("div");
            frontFace.className = "face front";

const backFace = document.createElement("div");
            backFace.className = "face back";
            
            if (pageData.type === 'cover-front') {
                const img = document.createElement("img");
                img.src = pageData.content;
                img.className = "cover-full-img";
                frontFace.appendChild(img);

const inside = document.createElement("div");
                inside.className = "inside-binder";
                backFace.appendChild(inside);

} else if (pageData.type === 'cover-back') {
                const inside = document.createElement("div");
                inside.className = "inside-binder";
                frontFace.appendChild(inside);

const img = document.createElement("img");
                img.src = pageData.content;
                img.className = "cover-full-img";
                backFace.appendChild(img);

} else if (pageData.type === 'empty-msg') {
                frontFace.innerHTML = "<div style='width:100%; text-align:center'>No photocards :(</div>";
            } else {
                // each pc page has 8 slots, 4 on front and 4 on back
                fillFace(frontFace, pageData.images.slice(0, 4));
                fillFace(backFace, pageData.images.slice(4, 8));

//comment the lines above if you want to use another layout, and uncomment one of the below options:
                //9 pcs per face
                //fillFace(frontFace, pageData.images.slice(0, 9));
                //fillFace(backFace, pageData.images.slice(9, 18));

//1 pc per face
                //fillFace(frontFace, pageData.images.slice(0, 1));
                //fillFace(backFace, pageData.images.slice(1, 2));
            }

pageDiv.appendChild(frontFace);
            pageDiv.appendChild(backFace);
            binder.appendChild(pageDiv);

pageDiv.addEventListener("click", function(e) {
                if(e.target.tagName === 'IMG' && !this.classList.contains('cover')) return;

if (this.classList.contains("flipped")) {
                    this.classList.remove("flipped");
                    setTimeout(() => {
                        this.style.zIndex = pagesToCreate.length - index;
                    }, 300);
                } else {
                    this.classList.add("flipped");
                    this.style.zIndex = index + 1;
                }
            });
        });
    }

function fillFace(faceElement, images) {
        //if you want 9 pcs per face, change 4 to 9
        //if you want 1 pc per face, change 4 to 1
        for (let k = 0; k < 4; k++) {
            if (images[k]) {
                const imgData = images[k];
                const pocket = document.createElement("div");
                pocket.className = "pocket";
                if(imgData.dataset.have === "missing") pocket.classList.add("missing");

const img = document.createElement("img");
                img.src = imgData.src;
                img.dataset.title = imgData.dataset.title;
                img.dataset.have = imgData.dataset.have;
                img.dataset.date = imgData.dataset.date || "";
                
                img.addEventListener("click", (e) => {
                    e.stopPropagation();
                    
                    //delete comment if you want to open only owned pcs
                    //if (imgData.dataset.have === "owned") { */
                        currentIndex = currentGalleryList.indexOf(imgData);
                        openModal();
                        wrapper.style.display = "flex";
                    //}
                });

pocket.appendChild(img);
                faceElement.appendChild(pocket);
            } else {
                const empty = document.createElement("div");
                empty.className = "empty-slot";
                faceElement.appendChild(empty);
            }
        }
    }

function openModal() {
        if (currentIndex < 0 || currentIndex >= currentGalleryList.length) return;
        const imgElement = currentGalleryList[currentIndex];

fullImg.src = imgElement.src;
        pcTitle.innerText = imgElement.dataset.title || "Sin título";
        
        let status = imgElement.dataset.have === "owned" ? "Owned" : "Missing";
        let dateInfo = imgElement.dataset.date ? imgElement.dataset.date : "";
        
        if (status == "Missing") pcData.innerText = status;
        else pcData.innerText = dateInfo;
    }

prevBtn.addEventListener("click", () => {
        if (currentGalleryList.length > 0) {
            currentIndex = (currentIndex - 1 + currentGalleryList.length) % currentGalleryList.length;
            openModal();
        }
    });

nextBtn.addEventListener("click", () => {
        if (currentGalleryList.length > 0) {
            currentIndex = (currentIndex + 1) % currentGalleryList.length;
            openModal();
        }
    });

wrapper.addEventListener("click", (e) => {
        if(e.target === wrapper) wrapper.style.display = "none";
    });

const filterIds = ["filter-era", "filter-type", "filter-have"];
    filterIds.forEach(id => {
        document.getElementById(id).addEventListener("change", renderBinder);
    });

document.getElementById("filter-have").value = "owned";
    renderBinder();
});

photocard binder for you!!

go back

pcbinder.html

pcbinder.css

pcbinder.js

go back