<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Trove - Game Library</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="[Link]
family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--black:#131313;--beige:#f5deb3;--red:#811336;--white:#ffffff;
--background:#f7f7f9;--green:#298113;--yellow:#e5a34e;
--borrowed-red:#811336;--unavailable-bg:#4a4a4a;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body{ margin:0; font-family:'Poppins',sans-serif; background:var(--
background); color:var(--black); }
/* ===== NAVBAR ===== */
.navbar{ background-color:var(--red); display:flex; align-items:center;
padding:12px 40px; position:sticky; top:0; z-index:1200; box-shadow:0 4px 15px
rgba(0,0,0,.4); gap:12px; }
.navbar .logo{ height:50px; margin-right:12px; }
.navbar ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0;
align-items:center; }
.navbar ul li{ position:relative; color:var(--beige); cursor:pointer;
font-weight:500; text-transform:uppercase; }
.navbar ul li:hover{ color:var(--white); }
.dropdown-content{ position:absolute; left:0; top:calc(100% + 8px);
background:var(--red); border-radius:8px; box-shadow:0 8px 24px
rgba(0,0,0,0.25); min-width:180px; display:none; z-index:1300; }
.dropdown:hover .dropdown-content{ display:block; }
.dropdown-content a{ display:block; padding:10px 14px; color:var(--beige);
text-decoration:none; font-weight:600; }
.dropdown-content a:hover{ background:#a00000; color:#fff; }
/* ===== HERO ===== */
.hero{ text-align:center; padding:200px 18px;
background:url("[Link] center/cover no-repeat;
color:#fff; }
.hero h2{ font-size:48px; font-weight:700; display:inline-block; margin:0
0 10px; position:relative; }
.hero h2::after{ content:""; display:block; width:100%; height:4px;
background:var(--red); margin-top:10px; }
.hero p{ margin:0; color:#f1f1f1; font-size:18px; }
/* GUIDELINES */
#guidelinesSection{ display:none; }
.guidelines-hero{ text-align:center; padding:200px 20px;
background:url("[Link] center/cover no-repeat;
color:#fff; }
.guidelines-hero h2 {
font-size: 40px;
font-weight: 700;
position: relative;
display: inline-block;
margin: 0 0 10px;
}
.guidelines-hero h2::after {
content:"";
display:block;
width:100%;
height:4px;
background:var(--red);
margin-top:10px;
}
.guidelines-content{ background:var(--white); padding:60px 40px;
color:#333; line-height:1.6; }
.guidelines-content h3{ font-size:1.5em; border-bottom:2px solid var(--
red); padding-bottom:5px; }
/* HOW TO BORROW SECTION */
#howToBorrowSection {
display:none;
}
.howto-hero {
text-align: center;
padding: 200px 20px;
background:url("[Link] no-repeat;
color:#fff;
}
.howto-hero h2 {
font-size: 40px;
font-weight: 700;
position: relative;
display: inline-block;
margin: 0 0 10px;
}
.howto-hero h2::after {
content:"";
display:block;
width:100%;
height:4px;
background:var(--red);
margin-top:10px;
}
.howto-hero p {
font-size: 1.2rem;
}
.howto-content h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.howto-content ul {
list-style: disc;
padding-left: 20px;
}
.howto-content li {
margin-bottom: 10px;
font-size: 1rem;
}
/* ===== SECTIONS ===== */
.section{ max-width:1200px; margin: 28px auto; padding:0 20px; }
.section h3{ font-size:15px; margin-left: 170px; margin-bottom:18px; font-
weight:600; font-family:'Poppins'; background:var(--red); color:beige;
padding:6px 15px; border-radius:0px; display:inline-block; }
.game-grid{ display:flex; gap:20px; flex-wrap:wrap; justify-
content:center; padding:18px 0; max-width: 860px; /* 3 × 250px cards + 2 ×
20px gaps */
margin: 0 auto;}
.card{ background:var(--white); border:1px solid #ddd; border-radius:0px;
padding:0px; width:270px; display:flex; flex-direction:column; align-
items:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.08);
transition:transform .22s, box-shadow .22s; }
.card:hover{ transform:translateY(-6px); box-shadow:0 8px 24px
rgba(0,0,0,0.12); }
.image-placeholder{ width:100%; height:140px; background:#eee; border-
radius:8px; margin-bottom:12px; display:flex; align-items:center; justify-
content:center; color:#666; }
.card h4{ margin:6px 0 4px; font-size:18px; text-align:center; }
.card p{ margin:2px 0; font-size:13px; color:#555; text-align:center; }
.status{ margin-top:10px; font-weight:700; padding:6px 12px; border-
radius:6px; display:inline-block; font-size:13px; color:#fff !important; }
.available{ background:var(--green); }
.reserved{ background:var(--yellow); }
.borrowed{ background:var(--borrowed-red); }
.unavailable{ background:var(--unavailable-bg); }
/* details panel */
.details{ display:none; padding:40px; background:#fafafa; animation:fadeIn
.3s ease-in-out; max-width:1200px; margin:24px auto; }
.[Link]{ display:block; }
.details-layout{ display:flex; gap:30px; flex-wrap:wrap; align-
items:stretch;}
.details-gallery{ flex:1; min-width:260px; }
.thumbnails{ display:flex; flex-direction:column; gap:10px; margin-
bottom:12px; }
.thumbnails img{ width:60px; height:60px; object-fit:cover; border-
radius:6px; border:2px solid #ddd; cursor:pointer; }
.main-img{ flex:1; text-align:center; min-width:260px; }
.main-img img{ max-width:320px; border-radius:10px; }
.details-info{ flex:1; background:var(--white); border:2px solid #ddd;
padding:20px; border-radius:0px; min-height:600px; width: 250px; /*
makes it thinner */
max-width: 300px; /* stops it from stretching too wide */
}
.details-info h2{ margin:0 0 12px; font-size:22px; }
.reserve-btn{ background:var(--red); color:var(--white); border:none;
padding:10px 18px; border-radius:6px; font-weight:700; cursor:pointer; }
.reserve-btn:hover{ background:#a00000; }
.details-desc{ margin-top:18px; font-size:15px; line-height:1.5; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.footer{ margin-top:40px; padding:28px; background:var(--red);
color:var(--beige); text-align:center; box-shadow:0 -4px 15px
rgba(0,0,0,.2); }
@media (max-width:760px){
.section h3{ font-size:14px;}
.image-placeholder{ height:120px; }
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 0px;
margin-bottom: 12px;
display: block;
}
</style>
</head>
<body>
<!-- NAVBAR -->
<div class="navbar">
<img src="[Link] class="logo" alt="The Trove
Logo">
<br>
<br>
<ul>
<li onclick="showHero()">Home</li>
<br><br>
<li class="dropdown"> Collection
<div class="dropdown-content" role="menu" aria-label="Collection
categories">
<a href="#section-category-1" onclick="goToCollection('section-
category-1')">Category 1</a>
<a href="#section-category-2" onclick="goToCollection('section-
category-2')">Category 2</a>
<a href="#section-category-3" onclick="goToCollection('section-
category-3')">Category 3</a>
</div>
</li>
<br>
<br>
<li onclick="showHowToBorrow()">HOW TO BORRROW</li>
<br>
<br>
<li onclick="showGuidelines()">Guidelines</li>
<br>
<br>
<li>FAQs</li>
<br>
<br>
<li>Reserve Now</li>
</ul>
</div>
<!-- HERO -->
<div class="hero" id="hero">
<h2>BROWSE THE TROVE!</h2>
<p>Check out the games you can borrow and their current availability.</p>
</div>
<!-- GUIDELINES SECTION -->
<div id="guidelinesSection">
<div class="guidelines-hero">
<h2>BORROWING GUIDELINES</h2>
<p>Play fair, care for the games, and keep The Trove fun for
everyone.</p>
</div>
<div class="guidelines-content">
<h3>General Rules</h3>
<ul>
<li><strong>Borrowing Limit:</strong> One (1) game at a time per
borrower.</li>
<li><strong>Borrowing Periods:</strong>
<ul>
<li>1 day – No reservation required</li>
<li>3 days – Reserve at least 2 days in advance</li>
<li>1 week – Reserve at least 2 days in advance</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- HOW TO BORROW SECTION -->
<div id="howToBorrowSection">
<div class="howto-hero">
<h2>HOW TO BORROW</h2>
<p>Follow these simple steps to enjoy games from The Trove.</p>
</div>
<div class="howto-content">
<h3>Steps</h3>
<ul>
<li><strong>Step 1:</strong> Check game availability in the
library.</li>
<li><strong>Step 2:</strong> Approach the librarian or staff.</li>
<li><strong>Step 3:</strong> Present your ID and log the
transaction.</li>
<li><strong>Step 4:</strong> Return the game on time in good
condition.</li>
</ul>
</div>
</div>
<!-- Categories -->
<div class="section" id="section-category-1">
<h3>CATEGORY 1 GAMES</h3>
<div class="game-grid" id="grid-category-1"></div>
</div>
<div class="section" id="section-category-2">
<h3>CATEGORY 2 GAMES</h3>
<div class="game-grid" id="grid-category-2"></div>
</div>
<div class="section" id="section-category-3">
<h3>CATEGORY 3 GAMES</h3>
<div class="game-grid" id="grid-category-3"></div>
</div>
<!-- DETAILS -->
<div class="details" id="detailsView" aria-hidden="true">
<div class="details-layout">
<div class="details-gallery">
<div class="thumbnails" id="thumbs"></div>
<div class="main-img"><img id="mainImg" src="" alt=""></div>
</div>
<div class="details-info">
<p><strong id="detailsCategory">CATEGORY</strong></p>
<h2 id="detailsTitle"></h2>
<p id="detailsPlayers"></p>
<p id="detailsPlaytime"></p>
<p id="detailsStatus" class="status"></p>
<button class="reserve-btn">RESERVE NOW!</button>
<div style="margin-top:20px;font-size:14px;">
<p><strong>Includes:</strong></p>
<ul id="detailsIncludes"></ul>
<p>Copies owned: <span id="detailsCopies"></span></p>
<p>Donated by: <span id="detailsDonor"></span></p>
</div>
</div>
</div>
<div class="details-desc" id="detailsDesc"></div>
<div style="margin-top:18px;">
<button onclick="hideDetails()" class="reserve-btn"
style="background:#555;">← Back to Collection</button>
</div>
</div>
<div class="footer">© 2025 The Trove Game Library | All Rights
Reserved</div>
<script>
const sheetURL = "[Link]
1vSXxxanvdsuF_vjCGQjki2TSbsrCbxX_-c3iPgJuCvudgP-
j4mXsvSxUK2RtdeVQwQ9PigUtQlEstLF/pub?output=csv";
function normalizeTitle(s){
if(!s && s !== 0) return '';
return [Link]().toLowerCase()
.replace(/[:'"\u2019]/g,'')
.replace(/[^a-z0-9]+/g,' ')
.trim().replace(/\s+/g,' ');
}
function parseCSV(text){
const rows = [];
let cur='', row=[], inQuotes=false;
for(let i=0;i<[Link];i++){
const ch=text[i], nxt=text[i+1];
if(ch==='"'){
if(inQuotes&&nxt==='"'){cur+='"'; i++;}
else inQuotes=!inQuotes;
} else if(ch===','&&!inQuotes){
[Link](cur); cur='';
} else if((ch==='\n'||ch==='\r')&&!inQuotes){
[Link](cur);
if(!([Link]===1&&row[0]==='')) [Link](row);
row=[]; cur='';
} else cur+=ch;
}
if(cur!==''||[Link]>0){ [Link](cur); [Link](row); }
return rows;
}
const games = {
"uno": {
title: "UNO Show 'Em No Mercy",
category: "Category 1",
players: "Player count: 2 to 10 players",
playtime: "Game Length 30 min",
description: `Amp up the chaos with new wild cards and brutal moves in
this fierce twist on classic UNO!
In UNO: Show ‘Em No Mercy, players enjoy the classic card-matching gameplay of
UNO with an extra dose of mayhem. This edition adds special "Show No Mercy"
wild cards that allow players to unleash powerful moves on their opponents,
creating intense, unpredictable moments in every round. From stacking
penalties to sabotaging others' hands, these new cards make each turn even
more strategic and unpredictable, while still keeping the fast-paced fun of
the original game.
With its easy-to-learn rules and added twists, UNO: Show ‘Em No Mercy is
perfect for families and friends looking to add more excitement and surprises
to their game nights.`,
includes: [
"180 sleeved cards (36 per color, 24 wild, 12 blank)",
"Instruction manual"
],
copies: 1,
donor: "High Council '25-'26",
images: ["[Link]
"[Link]
},
"tacocat": {
title: "Taco Cat Goat Cheese Pizza",
category: "Category 1",
players: "3–8 players",
playtime: "15 min",
description: "A quick reflex game of chanting and slapping cards in
sequence.",
includes: [
"66x sleeved cards",
"2x Instruction Cards",
"11x Taco",
"11x Cat",
"11x Goat",
"11x Cheese",
"11x Pizza",
"3x Narwhal",
"3x Gorilla",
"3x Groundhog"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"balancingchairs": {
title: "Balancing Chairs",
category: "Category 1",
players: "2+ players",
playtime: "10–20 min",
description: "Stack tiny chairs without toppling the pile.",
includes: [
"1x Box (worn out)",
"18x Chairs"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"tapple": {
title: "Tapple",
category: "Category 1",
players: "2–8 players",
playtime: "20 min",
description: "Fast-paced word game of categories and letters.",
includes: [
"1x Box (worn out)",
"1x Tapple Board",
"2x AA Batteries",
"36x Category Cards"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"cluedo": {
title: "Cluedo Suspect",
category: "Category 1",
players: "2–6 players",
playtime: "20–40 min",
description: "Card/container version of the detective classic.",
includes: [
"1x Container",
"1x Instruction Manual",
"1x The Crime Card",
"2x Reminder Cards",
"6x Character Profile Cards",
"6x Orange Evidence Cards (Suspects)",
"5x Orange Evidence Cards (Location)",
"4x Orange Evidence Cards (Weapon)",
"24x Case File Suspects (4 of each)",
"20x Case File Locations (4 of each)",
"16x Case File Weapons (4 of each)"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"coup": {
title: "Coup",
category: "Category 1",
players: "2–6 players",
playtime: "15 min",
description: "Bluffing and deduction in a dystopian world.",
includes: [
"15x character cards (3 each of Duke, Assassin, Captain, Ambassador,
Contessa)",
"6x summary cards",
"50x coins",
"1x Rules",
"1x Box"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"jenga": {
title: "Jenga",
category: "Category 1",
players: "2+ players",
playtime: "15 min",
description: "Classic tower stacking challenge.",
includes: [
"54x Wooden Blocks",
"1x Box"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"codenames": {
title: "Codenames",
category: "Category 2",
players: "2–8 players",
playtime: "15 min",
description: "Give clever clues to help teammates find the right words.",
includes: [
"200x Word Cards",
"40x Keys",
"1x Stand",
"1x Hourglass",
"8x Red Agents",
"8x Blue Agents",
"1x Double Agent",
"7x Bystanders",
"1x Assassin",
"1x Instruction Manual",
"1x Catalog"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"dungeonmayhem": {
title: "Dungeon Mayhem!",
category: "Category 2",
players: "2–4 players",
playtime: "15 min",
description: "Quick D&D-inspired card battles.",
includes: [
"30x Barbarian Cards (including reference and hit point tracker)",
"30x Rogue Cards (including reference and hit point tracker)",
"30x Paladin Cards (including reference and hit point tracker)",
"30x Wizard Cards (including reference and hit point tracker)",
"16x HP tokens",
"4x character tokens",
"1x Instruction Manual"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"flip7": {
title: "Flip7!",
category: "Category 2",
players: "2–6 players",
playtime: "30 min",
description: "A math and card-flipping strategy game.",
includes: [
"94x Cards",
"79x Number Cards",
"6x Modifier Cards",
"9x Action Cards (3 of each)",
"1x Container"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"throwthrowburrito": {
title: "Throw Throw Burrito",
category: "Category 3",
players: "2–6 players",
playtime: "15 min",
description: "Dodgeball meets card game with foam burritos.",
includes: [
"120x Cards",
"2x Burritos",
"6x Burrito Bruises",
"1x Fear Me Badge"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"beatthat": {
title: "Beat That!",
category: "Category 3",
players: "2–8 players",
playtime: "20–40 min",
description: "Party challenge game with measuring & dexterity tasks.",
includes: [
"1x Measuring Tape",
"2x Chopsticks",
"1x Hourglass",
"10x Cups",
"5x Balls",
"4x Orange Dice",
"39x Blue Tokens",
"15x Yellow Tokens",
"25x Orange Tokens",
"1x Sealed Notepad",
"160x Challenges",
"1x Instruction Manual",
"1x Box (slightly worn out)"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"poetryforneanderthals": {
title: "Poetry for Neanderthals",
category: "Category 1",
players: "2–6 players",
playtime: "15–30 min",
description: "Make your teammate guess a word using only one-syllable
clues.",
includes: [
"1x Box",
"398x Cards",
"1x Inflatable Club",
"1x Mini Balloon Pump"
],
copies: 1,
donor: "High Council '25-'26",
images: []
},
"soundsfishy": {
title: "Sounds Fishy",
category: "Category 1",
players: "2–8 players",
playtime: "15–30 min",
description: "Sound-based party/word game (print-and-play).",
includes: [
"1x Box",
"400x Cards"
],
copies: 1,
donor: "High Council '25-'26",
images: []
}
};
let statusData={};
async function loadStatus(){
const res = await fetch(sheetURL);
const txt = await [Link]();
const rows = parseCSV(txt);
const headers = [Link]().map(h=>[Link]());
statusData={};
[Link](r=>{
const obj={};
[Link]((h,i)=>obj[h]=r[i]);
const t = normalizeTitle([Link]||"");
if(t) statusData[t]=([Link]||"Available").toLowerCase();
});
renderAll();
}
function renderAll(){
// clear any existing cards
[Link]('.game-grid').forEach(g => [Link] = '');
for (let k in games) {
const g = games[k];
const norm = normalizeTitle([Link]);
const stat = statusData[norm] || "available";
renderCard(g, stat);
}
}
function renderCard(g, stat) {
const cat = [Link]().replace(/\s+/g, '-');
const grid = [Link]("grid-" + cat);
if (!grid) return;
const d = [Link]("div");
[Link] = "card";
[Link] = () => showDetails(g, stat);
// choose first image if present; otherwise use an auto-generated
placeholder
const imgSrc = ([Link] && [Link])
? [Link][0]
: "[Link] +
encodeURIComponent([Link]);
const imgHTML = `<img src="${imgSrc}" alt="${[Link]}" class="card-img">`;
[Link] = `
${imgHTML}
<h4>${[Link]}</h4>
<p>${[Link]}</p>
<p>${[Link]}</p>
<p class="status ${stat}">${[Link]()}</p>
`;
[Link](d);
}
function showDetails(g,stat){
[Link]("hero").[Link]="none";
[Link]("guidelinesSection").[Link]="none";
[Link]("howToBorrowSection").[Link]="none"; // hide
How To Borrow
[Link](".section").forEach(s=>[Link]="none");
const det=[Link]("detailsView");
[Link]("detailsCategory").innerText=[Link];
[Link]("detailsTitle").innerText=[Link];
[Link]("detailsPlayers").innerText=[Link];
[Link]("detailsPlaytime").innerText=[Link];
const st=[Link]("detailsStatus");
[Link]=[Link]();
[Link]="status "+stat;
[Link]("detailsCopies").innerText=[Link];
[Link]("detailsDonor").innerText=[Link];
const incl=[Link]("detailsIncludes");
[Link]=[Link](i=>`<li>${i}</li>`).join("");
[Link]("detailsDesc").innerText=[Link];
const thumbs=[Link]("thumbs");
[Link]="";
let main=[Link]("mainImg");
if([Link]){
[Link]=[Link][0];
[Link]((src,i)=>{
const im=[Link]("img");
[Link]=src; [Link]=()=>{[Link]=src};
[Link](im);
});
}else{
[Link]="[Link]
text="+encodeURIComponent([Link]);
}
[Link]("active");
[Link]("aria-hidden","false");
}
function hideDetails(){
[Link]("detailsView").[Link]("active");
[Link]("detailsView").setAttribute("aria-hidden","true");
[Link]("hero").[Link]="block";
[Link](".section").forEach(s=>[Link]="block");
}
function showGuidelines(){
[Link]("hero").[Link]="none";
[Link]("guidelinesSection").[Link]="block";
[Link]("howToBorrowSection").[Link]="none"; // hide
How To Borrow
[Link](".section").forEach(s=>[Link]="none");
[Link]("detailsView").[Link]("active");
}
function showHero(){
[Link]("hero").[Link]="block";
[Link]("guidelinesSection").[Link]="none";
[Link]("howToBorrowSection").[Link]="none"; // hide
How To Borrow
[Link](".section").forEach(s=>[Link]="block");
[Link]("detailsView").[Link]("active");
}
function showHowToBorrow(){
[Link]("hero").[Link]="none";
[Link]("guidelinesSection").[Link]="none";
[Link]("howToBorrowSection").[Link]="block"; // show
How To Borrow
[Link](".section").forEach(s=>[Link]="none");
[Link]("detailsView").[Link]("active");
}
function goToCollection(id){
showHero();
[Link](id).scrollIntoView({behavior:"smooth"});
}
loadStatus();
</script>
</body>
</html>