# Project export: UCscavenger

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: CruzHacks 2024
- Tagline: UCscavenger is a website focused on encouraging students to explore their campus with fun incentives and rewards.
- Devpost: https://devpost.com/software/ucscavenger
- GitHub: https://github.com/GuslyCo/ucscavenger
- Demo: http://ucscavenger.co/
- Team: 3 GitHub contributor(s) — Aidan Gu (268 commits), aech2411 (86 commits), EliMosss (77 commits)

## Devpost submission (written by the team)

### Inspiration

The idea for this project came about in November. We were overwhelmed by how daunting exploring the campus seemed. It felt like there was just so much to explore, with so little incentive to go to see most of it. Replicating systems we had seen in some of our favorite video games, we decided to create a game of sorts that encourages students to explore their campus, and gives them a reason to do so.

### What it does

Gives students location-based quests to complete. To complete the quest, the student must input a location-specific piece of trivia that they will find at the location. Completing quests will reward the player with custom-drawn slug avatars that they can set as their profile photo on the app.

### How we built it

First, we obtained a website domain from GoDaddy. Then, we used HTML, CSS, and Javascript to create all of the actual website's content. Art for the website was created on Photoshop, and imported in.

### Challenges we ran into

One of the largest challenges we ran into was getting past UCSC's secure encrypted Wifi. Initially, the Wifi was blocking all connections to our website, as it was flagged as not secure. Another challenge we faced was figuring out cookies and saving across pages. As none of us had any experience with these, it was a difficult task to complete.

### Accomplishments we're proud of

The profile page is probably our biggest accomplishment. Getting the profile photo select menu to work was a great challenge, and took the most time out of anything on the project. Another big accomplishment was the tracking of quest completion across pages. Getting the progress to stick was something that seemed simple, but proved to be quite difficult. However, it turned out exactly how we wanted it to.

### What we learned

We learned how to host a website, obtain security privileges, implement cookies, code in HTML and CSS, embed maps, and draw slugs.

### What's next

More quests, more slugs, daily quests.

## README (from the GitHub repository)

# ucscavenger
CruzHacks 2024 Project [Eli, Hannah, Aidan]

## Detected evidence (automated analysis)

Indexed codebase: 7 recognized source files, 40 KB.
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- CSS (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (9 of 9)

```
.DS_Store
.vscode/launch.json
index.html
map.html
popup.js
profile.html
quests.html
README.md
settings.html
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- Delete CNAME
- Create CNAME
- reverting
- fix pics
- Organization
- FINAL PUSH 2
- Merge branch 'main' of https://github.com/GuslyCo/ucscavenger
- LAST PUSH
- Merge branch 'main' of https://github.com/GuslyCo/ucscavenger
- Update index.html
- Update profile.html
- Update profile.html
- boom
- Update index.html
- Update .DS_Store
- pics
- Update index.html
- Update index.html
- Update index.html
- Update index.html

## Key source files (fetched from GitHub, selected and truncated for size)

### popup.js

```javascript
document.addEventListener("DOMContentLoaded", function() {
    function openPopup() {
        var popupWindow = document.getElementById("popup-window");
        popupWindow.style.display = "block";
    }

    function closePopup() {
        var popupWindow = document.getElementById("popup-window");
        popupWindow.style.display = "none";
    }

    // Get the elements by their ID
    var closeButton = document.getElementById("close-button");

    // Hide the pop-up window when the close button is clicked
    closeButton.addEventListener("click", function() {
        closePopup();
    });
});
```

### map.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="logoW.png"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Verdana, sans-serif;
        }

        /* header {
            text-align: right;
            padding: 10px;
            background-color: #3498db;
            color: #fff;
        } */
        header {
            background-color: #3498db;
            color: #ffc013;
            padding: 5px;
            text-align: right;
        }

        header a {
            color: #ffc013;
            text-decoration: none;
            margin-left: 15px;
            font-weight: bold;
        }

        #map, iframe {
            width: 100%;
            height: 100vh; /* 100% of the viewport height */
        }
        footer {
            background-color: #3498db;
            color: #fff;
            text-align: center;
            padding: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <!-- <a href="index.html" style="color: #fff; text-decoration: none;">Back to Home</a> -->
        <a href="index.html">Home</a>
        <a href="quests.html">Quests</a>
        <a href="profile.html">Profile</a>
        <a href="settings.html">Settings</a>
    </header>

    <h1 style="text-align: center;">Map</h1>
    
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12748.052015556363!2d-122.07238095000001!3d36.9856228!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808e41a2ff8cbf4f%3A0x3a8e3b7c928320d5!2sUniversity%20of%20California%2C%20Santa%20Cruz!5e0!3m2!1sen!2sus!4v1705745643116!5m2!1sen!2sus" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    <div id="map" style="width: 500px; height: 400px;"></div>

    <footer>
        <p>&copy; 2024 UCSCAVENGER. All rights reserved.</p>
    </footer>

</body>
</html>
```

### settings.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="logoW.png"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Verdana, sans-serif;
        }

        header {
            background-color: #3498db;
            color: #fff;
            padding: 5px;
            text-align: right;
        }

        header a {
            color: #ffc013;
            text-decoration: none;
            margin-left: 15px;
            font-weight: bold;
        }

        #map, iframe {
            width: 100%;
            height: 100vh; /* 100% of the viewport height */
        }

        #popup-window {
            position: fixed;
            width: 300px;
            height: 200px;
            background: white;
            border: 1px solid black;
            padding: 10px;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            display: none;
        } 
        body.inverted {
            filter: invert(100%);
        }
    </style>
</head>
<body>
    <header>
        <a href="index.html">Home</a>
        <a href="map.html">Map</a>
        <a href="quests.html">Quests</a>
        <a href="profile.html">Profile</a>
    </header>

    <!-- Your page content goes here -->
    <h1 style="text-align: center;">Settings</h1>

    <!-- Button to invert colors -->
    <button onclick="invertColors()">Invert Colors</button>

    <div id="map"></div>

    <script>
        // Function to toggle color inversion
        function invertColors() {
            var body = document.body;
            body.classList.toggle('inverted');
            
            // Set a cookie to remember user preference
            var isInverted = body.classList.contains('inverted');
            document.cookie = "colorInverted=" + isInverted;
        }

        // Check for color inversion preference on page load
        document.addEventListener('DOMContentLoaded', function() {
            var isInverted = document.cookie.includes('colorInverted=true');
            if (isInverted) {
                document.body.classList.add('inverted');
            }
        });
    </script>
</body>
</html>
```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="logoW.png"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UCscavenger</title>
    <!-- Additional head elements (stylesheets, scripts, etc.) can be added here -->
    <style>
        body {
            font-family: Verdana, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(to bottom, rgba(52, 152, 219, 0.5), #fff);
        }

        header {
            background: linear-gradient(to bottom, #3498db, rgba(52, 152, 219, 0));
            color: #fff;
            text-align: center;
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
        }

        h1 {
            text-align: center;
            font-size: 2em;
            margin: 0;
            color: rgb(255, 255, 255); /* Set the text color */
            position: relative;
            text-shadow: 2px 2px 0px black;
        }


        header a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            margin-right: 20px;
            cursor: pointer;
            font-size: 1.2em; /* Adjust the font size */
            padding: 8px 15px; /* Adjust the padding */
        }

        /* header button {
            background-color: #3498db;
            color: #fff;
            padding: 12px 20px; 
            font-size: 1em;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s;
            margin-bottom: 10px;
        } */
        
        
        /* header button:hover {
            background-color: #2980b9;
        } */

        main {
            padding: 20px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
            border: 2px solid #ffffff;
        }

        section {
            margin-bottom: 30px;
            padding-bottom: 20px;
        }

        .creators {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }

        .creator {
            width: 120px; /* Adjust the width */
            height: 120px; /* Adjust the height */
            border-radius: 50%;
            margin: 10px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .creator img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #000000;
        }

        .creator p {
            text-align: center;
            margin-top: 5px;
        }

        footer {
            background-color: #3498db;
            color: #fff;
            text-align: center;
            padding: 10px;
            width: 100%;
            border: 2px solid #000000;
        }

        .glow {
            font-size: 40px; /* Adjust the font size */
            color: rgb(0, 0, 0);
            text-align: center;
            -webkit-animation: glow 1s ease-in-out infinite alternate;
            -moz-animation: glow 1s ease-in-out infinite alternate;
            animation: glow 1s ease-in-out infinite alternate;
            margin-bottom: 2px;
        }

        button.glow {
            animation: glow 1s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from {
                box-shadow: 0 0 10px rgba(7, 7, 7, 0.8);
            }
            to {
                box-shadow: 0 0 20px rgba(0, 0, 0, 0);
            }
        }

        /* Responsive adjustments */
        @media screen and (max-width: 768px) {
            header a {
                font-size: 1em;
                padding: 8px 12px;
            }

            header button {
                padding: 10px 15px;
                font-size: 0.9em;
            }

            .glow {
                font-size: 40px;
            }
        }
    </style>
</head>
<body>
    <!-- Header Section (Modified) -->
    <header>
        <h1 class="header">UCscavenger</h1>
        <h1 class="glow"><a href="quests.html">GO TO QUESTS</a></h1>

        <!-- <a href="index.html">Home</a> -->
        <a href="map.html">Map</a>
        <!-- <a href="quests.html">Quests</a> -->
        <a href="profile.html">Profile</a>
        <a href="settings.html">Settings</a>
    </header>

    <!-- Main Content Section -->
    <main>
        <!-- Bio Section -->
        <section>
            <h2>Bio</h2>
            <p>Welcome to UCscavenger, the #1 website for college students all across California! With fun and engaging quests, valuable and sought after rewards, and an interactive and adaptive map, UCscavenger ensures that not only will a student know their campus, they will love it too!</p>
        </section>

        <!-- Mission Statement Section -->
        <section>
            <h2>Mission Statement</h2>
            <p>We want to provide more opportunities for students to get outside, exercise, and explore their campus. Oftentimes, students feel like there is no point in exploring certain nooks and corners of their campus. By providing an incentive to do so, students benefit by seeing and learning about these areas they otherwise would not have known about, and get moving and walking around more than they would have before.</p>
        </section>

        <!-- Creator Section -->
        <section>
            <h2>Meet the Creators</h2>
            <p>Here are the creators who built UCscavenger from a simple idea into what it is today!</p>
        </section>
            
        <!-- Creator Circles -->
        <div class="creators">
            <!-- Creator 1 -->
            <div class="creator">
  
[truncated — 603 more characters]
```

### profile.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="logoW.png"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile</title>
    <style>    
        body {
            margin: 0;
            padding: 0;
            font-family: Verdana, sans-serif;
        }

        header {
            background-color: #3498db;
            color: #fff;
            padding: 5px;
            text-align: right;
        }

        header a {
            color: #ffc013;
            text-decoration: none;
            margin-left: 15px;
            font-weight: bold;
        }

        .profile-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin-top: 0px; /* Adjusted margin for spacing */
        }

        .circle-container {
            width: 80vw;
            max-width: 350px;
            height: 80vw;
            max-height: 350px;
            background-color: #fff;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            object-fit: contain;
            margin-bottom: 10px; /* Reduce margin for spacing */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .profile-image {
            width: 100%;
            height: auto;
        }
        
        #profile-form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #name {
            margin-bottom: 10px;
        }

        #name,
        button {
            font-size: 16px;
            padding: 8px;
            margin: 5px;
        }

        .slugs {
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .slug {
            width: 120px; /* Adjust the width */
            height: 120px; /* Adjust the height */
            margin: 10px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0);
        }

        .slug p {
            text-align: center;
            margin-top: 5px;
        }

        .slug img {
            cursor: pointer; /* Add cursor style for indicating clickable */
            width: 100%;
            height: 100%;
            object-fit: contain;
            border: 2px solid #000000;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 10px; /* Adjusted margin for spacing */
        }

        @media screen and (max-width: 480px) {
            .circle-container {
                width: 80%;
                height: 80vw;
                max-height: initial;
            }

            .slug {
                margin: 5px; /* Added margin for spacing between slugs */
            }
        }
    </style>
</head>
<body>
<!-- THIS IS FOR SHARING COOKIES THROUGHOUT PAGES -->

    <script>
        // Function to retrieve the value of a cookie by name
        function getCookie(name) {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.indexOf(name + '=') === 0) {
                    return cookie.substring(name.length + 1, cookie.length);
                }
            }
            return null;
        }

        // Koi
        const koiQuestCompletedValue = getCookie('koiQuestCompleted');

        // Check if the cookie exists and display its value
        // if (koiQuestCompletedValue !== null) {
        //     document.write('Value of "koiQuestCompleted" cookie: ' + koiQuestCompletedValue);
        // } else {
        //     document.write('Cookie "koiQuestCompleted" not found.');
        // }

        // Baskin

        const baskinQuestCompletedValue = getCookie('baskinQuestCompleted');

        // Check if the cookie exists and display its value
        // if (baskinQuestCompletedValue !== null) {
        //     document.write('Value of "baskinQuestCompleted" cookie: ' + baskinQuestCompletedValue);
        // } else {
        //     document.write('Cookie "baskinQuestCompleted" not found.');
        // }


        // Central
        const centralQuestCompletedValue = getCookie('centralQuestCompleted');

        // Check if the cookie exists and display its value
        // if (centralQuestCompletedValue !== null) {
        //     document.write('Value of "centralQuestCompleted" cookie: ' + centralQuestCompletedValue);
        // } else {
        //     document.write('Cookie "centralQuestCompleted" not found.');
        // }

        // Seals
        const sealsQuestCompletedValue = getCookie('sealsQuestCompleted');

        // Check if the cookie exists and display its value
        // if (sealsQuestCompletedValue !== null) {
        //     document.write('Value of "sealsQuestCompleted" cookie: ' + sealsQuestCompletedValue);
        // } else {
        //     document.write('Cookie "sealsQuestCompleted" not found.');
        // }

        


    </script>

<!-- THIS IS FOR SHARING COOKIES THROUGHOUT PAGES -->   

    <header>
        <a href="index.html">Home</a>
        <a href="map.html">Map</a>
        <a href="quests.html">Quests</a>
        <a href="settings.html">Settings</a>
    </header>

    <!-- Your page content goes here -->
    <h1 style="text-align: center;">Profile</h1>
    
    <div class="profile-container">
        <!-- Circle container with profile image -->
        <div class="circle-container">
            <img class="profile-image" src="defaultSLUG.png" alt="Profile Image">
        </div>

        <!-- Profile name input form -->
        <div id="profile-form">
            <input type="text" id="name" placeholder="Your Name">
            <button onclick="saveProfile()">Save</button>
        </div>

[truncated — 5206 more characters]
```

### quests.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="logoW.png"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quests</title>
    <style>

        .center-container {
            margin-top: 50px; /* Optional: Adjust the top margin as needed */
        }

        .center-container button {
            margin: auto; /* Center the button horizontally */
            display: block; /* Ensure the button is a block element */
        }


        body {
            text-align: center;
            margin: 0;
            padding: 0;
            font-family: Verdana, sans-serif;
        }

        header {
            background-color: #3498db;
            color: #fff;
            padding: 5px;
            text-align: right;
        }

        header a {
            color: #ffc013;
            text-decoration: none;
            margin-left: 15px;
            font-weight: bold;
        }
        
        #popup-window {
            position: fixed;
            width: 500px;
            height: 200px;
            background: white;
            border: 1px solid black;
            padding: 10px;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            display: none;
        } 

        .popup {
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
        } 

        
        .popup-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #000000;
            width: 70%;
            font-weight: bolder;
        } 


        .popup-content button {
            background-color: #fbd010; 
            border: 1px solid #000000;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <header>
        <a href="index.html">Home</a>
        <a href="map.html">Map</a>
        <a href="profile.html">Profile</a>
        <a href="settings.html">Settings</a>
        
    </header>

    <!-- Your page content goes here -->

    <h1 style="text-align: center;">Quests</h1>


    <!-- Koi Pond Section -->
    <h2 style="text-align: center;">Porter</h2>

    <script>
        function checkKoiQuestCompletedCookie() {
            // Retrieve the value of the "koiQuestCompleted" cookie
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                if (cookie.indexOf("koiQuestCompleted=") === 0) {
                    // The quest has been completed if the cookie value is "true"
                    return cookie.substring("koiQuestCompleted=".length, cookie.length) === "true";
                }
            }
            return false; // Default to false if the cookie is not found
        }

        function setKoiQuestCompletedCookie() {
            // Set a cookie named "koiQuestCompleted" with a value of "true"
            document.cookie = "koiQuestCompleted=true; expires=Thu, 01 Jan 2030 00:00:00 UTC; path=/";
        }
    </script>

    <button id="koiButton">
        Go to the Koi Pond
    </button>
    <div id="koiPopup" class="popup">
        <div class="popup-content">
            <h1 style="color:rgb(2, 62, 228);">Koi Pond</h1>
            <p>What is the name of the fish memorialized on the plaque?</p>
            <input type="text" id="koiPondUser" size="15">
            <button id="koiSubmitButton">Submit</button>
            <button id="koiClosePopup">Close</button>
            <div id="koiResultMessage">
                <span id="koiResultMessageTrue" style="color: green;"></span>
                <span id="koiResultMessageFalse" style="color: red;"></span>
            </div>
        </div>
    </div>

    <script>
        var koiButton = document.getElementById("koiButton");
        var koiPopup = document.getElementById("koiPopup");
        var koiClosePopup = document.getElementById("koiClosePopup");
        var koiSubmitButton = document.getElementById("koiSubmitButton");
        var koiPondUserInput = document.getElementById("koiPondUser");
        var koiResultMessageElementTrue = document.getElementById("koiResultMessageTrue");
        var koiResultMessageElementFalse = document.getElementById("koiResultMessageFalse");

        koiButton.addEventListener("click", function () {
            koiPopup.classList.add("show");
        });

        koiClosePopup.addEventListener("click", function () {
            koiPopup.classList.remove("show");
        });

        koiPopup.addEventListener("click", function (event) {
            if (event.target == koiPopup) {
                koiPopup.classList.remove("show");
            }
        });

        koiSubmitButton.addEventListener("click", function () {
            var userInputValue = koiPondUserInput.value;
            var specificValue = "midas";

            var isSame = userInputValue.toLowerCase() === specificValue.toLowerCase();

            koiResultMessageElementTrue.textContent = isSame ? "Quest Completed" : "";
            koiResultMessageElementFalse.textContent = !isSame ? "Incorrect, please try again" : "";

            if (isSame) {
                setKoiQuestCompletedCookie(); // Call the function to set the cookie
                koiButton.disabled = true;
            }

            if (isSame) {
                setTimeout(function () {
                    koiPopup.classList.remove("show");
                    koiResultMessageElement.textContent = "";
  
[truncated — 12185 more characters]
```