diff --git a/app/(main)/clue/[clueId]/page.js b/app/(main)/clue/[clueId]/page.js index 8cd622e..88f37b0 100644 --- a/app/(main)/clue/[clueId]/page.js +++ b/app/(main)/clue/[clueId]/page.js @@ -576,6 +576,12 @@ export default function CluePage({ params }) { return (
+ {/* Background Layer */} +
+ + {/* Rails Background Layer */} +
+ {/* Map Banner with team info and timer */}
@@ -665,17 +671,21 @@ export default function CluePage({ params }) {
{/* Clue Information Section */} -
-

{clue?.title}

-
-

Description

-

{clue?.description}

- {clue?.location && ( -
-

Location Hint

-

{clue.location}

-
- )} +
+
+

{clue?.title}

+
+
+
+

Description

+

{clue?.description}

+ {clue?.location && ( +
+

Location Hint

+

{clue.location}

+
+ )} +
@@ -704,9 +714,33 @@ export default function CluePage({ params }) { display: flex; flex-direction: column; min-height: 100vh; - background-color: #f4f1ea; - padding-bottom: 70px; /* Space for bottom navbar */ + background-color: #69b5a8; + padding-bottom: 70px; position: relative; + overflow: hidden; + } + + .background-layer { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 60%; + background-color: #a7d2cb; + z-index: 0; + } + + .rails-background { + position: absolute; + bottom: 70px; + left: 0; + width: 100%; + height: 20vh; + background-image: url("/images/rails.svg"); + background-repeat: repeat-x; + background-position: bottom; + background-size: contain; + z-index: 1; } .success-notification { @@ -871,6 +905,8 @@ export default function CluePage({ params }) { width: 100%; max-width: 600px; margin: 0 auto; + position: relative; + z-index: 2; /* Ensure content appears above the background layers */ } .scanner-section { @@ -906,15 +942,45 @@ export default function CluePage({ params }) { font-weight: bold; } - .clue-scroll { - background-color: #f8f3e3; - border-radius: 10px; - padding: 20px; + .clue-container-outer { width: 100%; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - position: relative; margin-bottom: 20px; - border: 1px dashed #9c6b30; + } + + .clue-title-container { + background-color: #D6BC69; + border: 2px solid black; + border-bottom: none; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + padding: 15px 20px 5px 20px; + width: 100%; + } + + .clue-title { + color: #68543c; + font-size: 1.8rem; + text-align: center; + margin: 0; + padding-bottom: 10px; + } + + .clue-scroll { + background-color: #D6BC69; + border: 2px solid black; + border-top: none; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + width: 100%; + padding: 20px; + position: relative; + } + + .clue-content { + padding: 20px; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } h2 { @@ -1009,15 +1075,6 @@ export default function CluePage({ params }) { color: #d32f2f; } - .clue-title { - color: #68543c; - font-size: 1.8rem; - text-align: center; - margin-bottom: 20px; - border-bottom: 2px solid #9c6b30; - padding-bottom: 10px; - } - .admin-tools { background-color: #f8d7da; border: 2px dashed #d9534f; @@ -1060,9 +1117,10 @@ export default function CluePage({ params }) { align-items: center; justify-content: space-between; border-bottom: 2px solid #4a3c2a; - z-index: 10; + z-index: 2; /* Ensure it appears above the background layers */ flex-shrink: 0; margin-bottom: 20px; + position: relative; } .team-name { diff --git a/app/(main)/leaderboard/page.js b/app/(main)/leaderboard/page.js index fe49692..2595a32 100644 --- a/app/(main)/leaderboard/page.js +++ b/app/(main)/leaderboard/page.js @@ -5,6 +5,7 @@ import { useRouter } from "next/navigation"; import { useSession } from "next-auth/react"; import Link from "next/link"; import NavBar from "@/components/NavBar"; +import Image from "next/image"; export default function LeaderboardPage() { const [teams, setTeams] = useState([]); @@ -159,6 +160,25 @@ export default function LeaderboardPage() {
No teams on the leaderboard yet
)} + {/* Decorative corner images */} +
+ Cannon Ball +
+ +
+ Barrel +
+ {/* Only show navigation bar when the hunt hasn't ended */} {!huntJustEnded && (
); diff --git a/clue_hunt.db b/clue_hunt.db index 2454c74..e032091 100644 Binary files a/clue_hunt.db and b/clue_hunt.db differ diff --git a/public/images/cannon ball.svg b/public/images/cannon-ball.svg similarity index 100% rename from public/images/cannon ball.svg rename to public/images/cannon-ball.svg diff --git a/public/images/rails.svg b/public/images/rails.svg new file mode 100644 index 0000000..312a3a9 --- /dev/null +++ b/public/images/rails.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/scroll-square.svg b/public/images/scroll-square.svg new file mode 100644 index 0000000..c686ad8 --- /dev/null +++ b/public/images/scroll-square.svg @@ -0,0 +1,8 @@ + + + + + + + +