Hackathons/Bitcamp-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beverage Scoring System Table CSS Update

Browse Source
This commit is contained in:
GamerBoss101
2025-04-12 20:25:16 -04:00
parent e58784a4f1
commit cd524b73bf
1 changed files with 98 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/app/(app)/pointsguide/page.tsx
View File

@@ -1,108 +1,110 @@
"use client"; "use client";
const tableData = [ const tableData = [
{ {
drink: "Water", drink: "Water",
volume: "8", volume: "8",
caffeine: "n/a", caffeine: "n/a",
sugar: "n/a", sugar: "n/a",
points: "100", points: "100",
bonus: "+15 for >=64oz in day", bonus: "+15 for >=64oz in day",
}, },
{ {
drink: "Coffee", drink: "Coffee",
volume: "8", volume: "8",
caffeine: "95", caffeine: "95",
sugar: "?", sugar: "?",
points: "50", points: "50",
bonus: "0 pts after 400mg caffeine", bonus: "0 pts after 400mg caffeine",
}, },
{ {
drink: "Coca-Cola", drink: "Coca-Cola",
volume: "8", volume: "8",
caffeine: "34", caffeine: "34",
sugar: "39", sugar: "39",
points: "0", points: "0",
bonus: "Exceeds sugar", bonus: "Exceeds sugar",
}, },
{ {
drink: "100% Fruit Juice", drink: "100% Fruit Juice",
volume: "8", volume: "8",
caffeine: "0", caffeine: "0",
sugar: "22", sugar: "22",
points: "50", points: "50",
bonus: "0 pts after 30.5g sugar", bonus: "0 pts after 30.5g sugar",
}, },
{ {
drink: "Dairy Milk (low-fat)", drink: "Dairy Milk (low-fat)",
volume: "8", volume: "8",
caffeine: "0", caffeine: "0",
sugar: "12", sugar: "12",
points: "50", points: "50",
bonus: "+0.5 calcium bonus", bonus: "+0.5 calcium bonus",
}, },
]; ];
export default function PointsGuidePage() { export default function PointsGuidePage() {
return ( return (
<div className="px-6 py-10 max-w-3xl mx-auto font-sans text-neutral-100"> <div className="px-6 py-10 max-w-3xl mx-auto font-sans text-neutral-100">
<h1 className="text-3xl font-bold mb-4 text-[color:var(--color-warning-300)]"> <h1 className="text-3xl font-bold mb-4 text-[color:var(--color-warning-300)]">
Points Guide Points Guide
</h1> </h1>
<p className="mb-6 text-surface-300"> <p className="mb-6 text-surface-300">
Learn how many points you receive for each drink! Learn how many points you receive for each drink!
</p> </p>
<ul>
<ul> Game Points System:
Game Points System: <ul className="list-disc pl-5 mt-1 space-y-1">
<ul className="list-disc pl-5 mt-1 space-y-1"> <li> +15 points for drinking ≥100 oz of water </li>
<li> +15 points for drinking ≥100 oz of water </li> <li> +10 points for keeping caffeine &lt; 200 mg </li>
<li> +10 points for keeping caffeine &lt; 200 mg </li> <li> +15 points for staying under the sugar cap all day </li>
<li> +15 points for staying under the sugar cap all day </li> <li>
<li> Exceeding 400mg caffeine limit or 30.5g sugar limit = 0 pts logged for those drinks </li> {" "}
</ul> Exceeding 400mg caffeine limit or 30.5g sugar limit = 0 pts logged
for those drinks{" "}
</li>
</ul>
</ul> </ul>
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm"> <div className="bg-surface-700 rounded-xl px-4 py-4 my-6 shadow-sm">
<div className="overflow-x-auto rounded-xl">
<table className="min-w-full text-sm text-left text-[color:var(--color-warning-200)]">
<caption className="caption-top p-4 text-lg font-semibold text-[color:var(--color-warning-200)]">
Beverage Scoring System
</caption>
<div className="overflow-x-auto rounded-xl shadow border border-[color:var(--color-primary-800)]"> <thead className="bg-[color:var(--color-surface-200)] text-[color:var(--color-success-950)] text-center">
<table className="min-w-full text-sm text-left text-[color:var(--color-warning-200)]"> <tr>
<caption className="caption-top p-4 text-lg font-semibold text-[color:var(--color-warning-200)]"> <th className="px-4 py-2">Drink</th>
Beverage Scoring System <th className="px-4 py-2">Volume (oz)</th>
</caption> <th className="px-4 py-2">Caffeine (mg)</th>
<th className="px-4 py-2">Sugar (g)</th>
<th className="px-4 py-2">Points Earned</th>
<th className="px-4 py-2">Bonus</th>
</tr>
</thead>
<tbody className="[&>tr:hover]:bg-[color:var(--color-surface-800)] text-center">
{tableData.map((row, i) => (
<tr
key={i}
className="border-t border-[color:var(--color-surface-950)]"
>
<td className="px-2 py-2 font-medium">{row.drink}</td>
<td className="px-2 py-2">{row.volume}</td>
<td className="px-2 py-2">{row.caffeine}</td>
<td className="px-2 py-2">{row.sugar}</td>
<td className="px-2 py-2 font-bold">{row.points}</td>
<td className="px-2 py-2 italic">{row.bonus}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<thead className="bg-[color:var(--color-primary-100)] text-[color:var(--color-success-950)]"> <div className="h-6" />
<tr> <div className="h-6" />
<th className="px-4 py-2">Drink</th> </div>
<th className="px-4 py-2">Volume (oz)</th> );
<th className="px-4 py-2">Caffeine (mg)</th>
<th className="px-4 py-2">Sugar (g)</th>
<th className="px-4 py-2">Points Earned</th>
<th className="px-4 py-2">Bonus</th>
</tr>
</thead>
<tbody className="[&>tr:hover]:bg-[color:var(--color-surface-700)]">
{tableData.map((row, i) => (
<tr key={i} className="border-t border-[color:var(--color-primary-200)]">
<td className="px-4 py-2 font-medium">{row.drink}</td>
<td className="px-4 py-2">{row.volume}</td>
<td className="px-4 py-2">{row.caffeine}</td>
<td className="px-4 py-2">{row.sugar}</td>
<td className="px-4 py-2 font-bold">{row.points}</td>
<td className="px-4 py-2 italic">{row.bonus}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="h-6" />
<div className="h-6" />
</div>
);
} }