# Project export: CruzConnect

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: Transform Santa Cruz connections. Discover and organize rides (Uber/Lyft, carpooling), recreational activities, tutoring, lost items, and more, all within our intuitive, all-in-one platform.
- Devpost: https://devpost.com/software/cruzconnect
- GitHub: https://github.com/dvizcarr/CruzConnect
- Demo: http://cruzconnect.co/
- Team: 3 GitHub contributor(s) — aydan (52 commits), dvizcarr (28 commits), Deepak Sah (19 commits)

## Devpost submission (written by the team)

### Inspiration

The inspiration behind CruzConnect was born out of the need for a streamlined and organized platform to connect people within the UC Santa Cruz community. We observed that individuals were frequently seeking rides, planning Uber or Lyft trips, searching for recreational activities, looking for tutoring services, and even attempting to recover lost items. However, these requests were scattered across various platforms, from school's Snapchat stories to Reddit forums and other social media platforms. This resulted in a chaotic and disorganized experience, where valuable posts often got lost in the digital noise and reposting was common.

### What it does

CruzConnect is a comprehensive solution to these challenges. It serves as a one-stop platform that allows users to easily find and plan rides, discover recreational activities, connect with tutors, and report lost items. It brings order to the chaos, making it simple for Santa Cruz residents to connect and share their needs within a dedicated community.

### How we built it

To build CruzConnect, we utilized a standard combination of front-end and back-end technologies. Our front-end was developed using HTML, CSS, and a little bit of JavaScript to create an intuitive user interface. On the back-end, we used Node.js as our server-side runtime, complemented by Express, to proficiently manage user requests. MongoDB Atlas was chosen as our database solution for seamless data storage and retrieval. The integration of these technologies ensured a robust and user-friendly platform.

### Challenges we ran into

This was our first venture into web development and introduced us to HTML, CSS, JavaScript, and MongoDB. When we first envisioned our idea on that memorable Friday night, we understood that transforming our creative vision into a fully functional website would take us on a profound journey of learning, marked by a substantial dose of trial and error. Designing a user-friendly interface that met the diverse needs of our clients indeed presented a significant challenge.

### Accomplishments we're proud of

We are proud to have worked through the hardship in the creation of CruzConnect. Our greatest accomplishment is providing a space where people can easily connect and share resources, enhancing the sense of community in our area.

### What we learned

While building CruzConnect, we learned valuable lessons in web development, user experience design, and project management. We gained insights into the importance of effective collaboration, user feedback, and iterative development.

### What's next

We plan to broaden our services for more communal needs. We will introduce user accounts and authentication for enhanced security and personalized experiences, with plans to continually update and improve our platform. Users can create profiles, track activity, and engage more meaningfully. Incorporating user feedback we plan on expanding our thriving online community.

## README (from the GitHub repository)

readme


## Detected evidence (automated analysis)

Indexed codebase: 18 recognized source files, 73 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- MongoDB (technology) — detected in the code
- Node.js (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (20 of 20)

```
.github/workflows/static.yml
CNAME
home.css
index.html
lostnfound.css
LostNFound.html
new_post.css
new_post.html
package.json
README.md
recreation.css
recreation.html
rideshare_newpost.css
rideshare_newpost.html
rideshare.css
rideshare.html
server.js
site.js
tutoring.css
tutoring.html
```

### Dependencies

- package.json: body-parser@^1.20.2, express@^4.18.2, mongoose@^8.1.0, nodemon@^3.0.3

### Recent commits (newest first)

- maybe fixed stretched post issue on recreation page
- added create post function
- added tab icon
- hover button animation
- added hover button
- finished lost and found cards
- Merge branch 'main' of https://github.com/dvizcarr/CruzConnect
- Committing finalized version of tutoring
- added bgs
- tutoring images and formatting css
- Add files via upload
- added other bgs
- Add files via upload
- Adding picture itself jpg
- Adding images
- deleted
- Merge branch 'main' of https://github.com/dvizcarr/CruzConnect
- finished recreation postings
- Add files via upload
- updated recreation page a bit

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

### package.json

```
{
  "name": "slugconnect",
  "version": "1.0.0",
  "description": "readme",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "express": "^4.18.2",
    "mongoose": "^8.1.0"
  },
  "devDependencies": {
    "nodemon": "^3.0.3"
  }
}

```

### server.js

```javascript
// Import required modules
const express = require('express');
const mongodb = require('mongodb');
const bodyParser = require('body-parser');

// Set up Express app
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// MongoDB connection URI and database name
const mongoURI = 'mongodb+srv://dvizcarr:TJVPg5dcfwJqhMYg@cruzhacks.dpkyaf6.mongodb.net/CruzConnect'; // Update with your MongoDB URI
const dbName = 'CruzConnect'; // Update with your database name

// Function to connect to MongoDB and insert a new document
async function insertDocument(data) {
  const client = new mongodb.MongoClient(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true });

  try {
    await client.connect();
    console.log('Connected to MongoDB');

    const db = client.db(dbName);
    const collection = db.collection('notes'); // Update with your collection name

    // Insert data into MongoDB
    const result = await collection.insertOne(data);
    console.log(`Document inserted with _id: ${result.insertedId}`);
  } finally {
    await client.close();
    console.log('Connection to MongoDB closed');
  }
}

// Route to handle form submissions
app.post('/', (req, res) => {
  const formData = {
    title: req.body.title,
    description: req.body.description,
    date: req.body.date,
    people: parseInt(req.body.people),
    price: parseInt(req.body.price),
  };

  // Call the function to insert data into MongoDB
  insertDocument(formData);

  res.send('Form data submitted successfully!');
});

// Start the server
const port = 3000; // Update with your desired port
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
```

### new_post.css

```css
body {
    background-color: #001d3d;
}

p {
    color: white;
}

.ta {
    width: 250px;
    height: 100px;
    text-align: left;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0.4em;
    padding-right: 0.4em;
    border: 0;
}

fieldset {
    width: 254px
}
```

### rideshare_newpost.css

```css
/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Makes sure padding doesn't affect total width */
    font-family: 'Poppins', sans-serif;
}

/* Ensure that body takes full height */
body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent scrolling within the iframe */
}

/* Style for the pop-up container */
.popup-container {
    display: block;
    /* Display the container by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffc300;
    padding: 30px;
    /* Increase padding for a bigger container */
    border: 1px solid #ccc;
    z-index: 1;
    color: #000814;
    width: 70%;
    /* Adjust the width as desired */
    max-width: 400px;
    /* Limit the maximum width to prevent it from getting too wide */
}

/* Style for the close button */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

form {
    /* ... existing styles ... */
    max-width: none;
    /* Allow form to expand fully within the iframe */
}

label,
.ta,
input,
button {
    display: block;
    /* Make form elements block to occupy full width */
    width: 100%;
    margin-bottom: 10px;
    /* Space out elements */
}

input[type="text"],
input[type="date"],
input[type="number"],
.ta,
button {
    border: 1px solid #ccc;
    /* Consistent border */
    padding: 8px;
    /* Padding for input */
    border-radius: 4px;
    /* Rounded corners for input fields */
}

button {
    background-color: #0077b6;
    /* Button color */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    /* Make the text bold */
    border-radius: 4px;
    /* Rounded corners for button */
}

button:hover {
    background-color: #005f8a;
    /* Slightly darker on hover */
}

/* ... additional styles ... */
```

### new_post.html

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="new_post.css">
    <title>CruzConnect</title>
    <style>
        /* Style for the pop-up container */
        .popup-container {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffc300;
            padding: 20px;
            border: 1px solid #ccc;
            z-index: 1;
            color: #000814;
        }

        /* Style for the close button */
        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }
    </style>
    <script>
        function openForm() {
            var popupContainer = document.getElementById('popupContainer');
            popupContainer.style.display = 'block';
        }

        function closeForm() {
            var popupContainer = document.getElementById('popupContainer');
            popupContainer.style.display = 'none';
        }
    </script>
</head>

<body>
    <button class="open-button" onclick="openForm()">New Post</button>
    <div id="popupContainer" class="popup-container">
        <span class="close-button" onclick="closeForm()">X</span>
        <form method ="post" action="/">
            <!-- Fields Needed: Title (required), Description (required, minimum 20 words), Date(required w/ date picker) -->
            <!-- People Needed/Space Available (maybe required for some not for others?)-->
            <!-- Price ($$$, not required)-->
            <p>
                <label for="title">Listing Title: </label>
                <input id="title" type="text" placeholder="title..." name="title" >
            </p>
            <p>
            <fieldset>
                <legend style="color:white">Description:</legend>
                <textarea class="ta" name="description"></textarea>
            </fieldset>
            </p>
            <p>
                <label for="date">When? </label>
                <input type="date" id="date" name="date" value="2024-01-19" min="2024-01-19" max="2031-01-01" />
            </p>
            <p>
                <label for="number">How many people do you need?</label>
                <input id="number" type="number" name="people" min="1" step="1">
            </p>
            <p>
                <label for="number">Asking Price: $ </label>
                <input id="number" type="number" name="price" min="1" step="1">
            </p>
            <button type="submit"> Create Post!</button>
        </form>
    </div>
</body>

</html>
```

### rideshare_newpost.html

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="rideshare_newpost.css">
    <title>CruzConnect</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap"
        rel="stylesheet">
    <style>
        /* Style for the pop-up container */
        .popup-container {
            display: block;
            /* Display the container by default */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffc300;
            padding: 30px;
            /* Increase padding for a bigger container */
            border: 1px solid #ccc;
            z-index: 1;
            color: #000814;
            width: 70%;
            /* Adjust the width as desired */
            max-width: 400px;
            /* Limit the maximum width to prevent it from getting too wide */
        }

        /* Style for the close button */
        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- Remove the "New Post" button from here -->
    <div id="popupContainer" class="popup-container">
        <span class="close-button" onclick="closeForm()">X</span>
        <form method="post" action="/">
            <!-- Fields Needed: Title (required), Description (required, minimum 20 words), Date(required w/ date picker) -->
            <!-- People Needed/Space Available (maybe required for some not for others?)-->
            <!-- Price ($$$, not required) -->
            <p>
                <label for="title">Listing Title: </label>
                <input id="title" type="text" placeholder="title..." name="title">
            </p>
            <p>
            <fieldset>
                <legend style="color:white">Description:</legend>
                <textarea class="ta" name="description"></textarea>
            </fieldset>
            </p>
            <p>
                <label for="date">When? </label>
                <input type="date" id="date" name="date" value="2024-01-19" min="2024-01-19" max="2031-01-01" />
            </p>
            <p>
                <label for="number">How many people do you need?</label>
                <input id="number" type="number" name="people" min="1" step="1">
            </p>
            <p>
                <label for="number">Asking Price: $ </label>
                <input id="number" type="number" name="price" min="1" step="1">
            </p>
            <button type="submit"> Create Post!</button>
        </form>
    </div>
</body>

</html>
```

### recreation.css

```css
/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Set a default font and line height */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

h3 {
    color: #0077b6;
}

.price-filter {
    width: 50px;
}

#overlay {
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    z-index: 999;
    /* Z-index lower than the popup */
}

/* Style the header section */
header {
    background-color: #0077b6;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header img {
    width: 90px;
}

/* Style for Create Post button */
.open-button {
    background-color: #fff;
    color: #0077b6;
    border: 1px solid #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 3px;
}

.popup-container button {
    width: 100px;
    height: 25px;
    align-items: center;
    border-radius: 10px;
    color: white;
    background-color: #000814;
}

.open-button:hover {
    background-color: #003566;
    border-color: #003566;
    color: #ffc300;
    transition: 0.4s;
}

/* Style the filters sidebar */
#filters {
    background-color: #f0f0f0;
    padding: 20px;
    width: 200px;
    float: left;
}

#filters ul {
    list-style-type: none;
}

#filters ul li label {
    margin-left: 5px;
}

.post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: 1px solid #ccc;
    /* Add a border */
    border-radius: 10px;
    /* Rounded corners for a 3D effect */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    /* Add a shadow for depth */
    padding: 15px;
    /* Increase padding for spacing */
    background-color: #fff;
    /* Background color */
}

.post-content {
    flex-grow: 1;
    padding-bottom: 10px;
}

.post h3 {
    color: #0077b6;
    margin-bottom: 10px;
}

.details-btn {
    background-color: #0077b6;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    display: block;
    width: 100%;
    text-align: center;
}

/* Clearfix for the float */
footer::after {
    content: "";
    display: table;
    clear: both;
}

aside {
    height: 100vh;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        float: none;
    }

    #post-grid {
        margin-left: 0;
    }
}

/* Style adjustments for the Create Post popup */
.popup-container {
    background: #193d50;
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000;
    /* High z-index to be on top */
    max-width: 625px;
    /* Maximum width of the form */
    width: 90%;
    /* Responsive width */
    height: 475px;
    /* Height based on content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

.ta {
    min-height: 100px;
    min-width: 575px;
    max-width: 575px;
    max-height: 100px;
}

.close-button {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    /* Larger close button */
    background: none;
    border: none;
}

/* Style the posts grid */
#post-grid {
    margin-left: 220px;
    /* Adjust this value as necessary */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    background-image: url('landscapeshotucsc.jpg');
    /* Adjust the path to your image file */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* This will make sure the background image doesn't scroll with the page */
    min-height: 100vh;
    /* Minimum height to ensure it covers the viewport */
}

/* Style for individual posts */
.post {
    background-color: rgba(255, 255, 255, 0.9);
    /* Semi-transparent background for readability */
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    /* Add space between posts */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
    max-width: 100%;
}

/* ... additional existing styles ... */

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        position: relative;
        /* This will make the filters stack above the posts on smaller screens */
        order: 1;
        /* Assuming you're using flexbox on a parent container */
    }

    #post-grid {
        margin-left: 0;
        order: 2;
        /* This will ensure the posts grid comes after the filters */
    }
}
```

### rideshare.css

```css
/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Set a default font and line height */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

h3 {
    color: #0077b6;
}

.price-filter {
    width: 50px;
}

#overlay {
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    z-index: 999;
    /* Z-index lower than the popup */
}

/* Style the header section */
header {
    background-color: #0077b6;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header img {
    width: 90px;
}

/* Style for Create Post button */
.open-button {
    background-color: #fff;
    color: #0077b6;
    border: 1px solid #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 3px;
}

.open-button:hover {
    background-color: #003566;
    border-color: #003566;
    color: #ffc300;
    transition: 0.4s;
}

.popup-container button {
    width: 100px;
    height: 25px;
    align-items: center;
    border-radius: 10px;
    color: white;
    background-color: #000814;
}

/* Style the filters sidebar */
#filters {
    background-color: #f0f0f0;
    padding: 20px;
    width: 200px;
    float: left;
}

#filters ul {
    list-style-type: none;
}

#filters ul li label {
    margin-left: 5px;
}

/* Style the posts grid */
#post-grid {
    margin-left: 220px;
    /* Width of filters + some extra space */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
}

.post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: 1px solid #ccc;
    /* Add a border */
    border-radius: 10px;
    /* Rounded corners for a 3D effect */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    /* Add a shadow for depth */
    padding: 15px;
    /* Increase padding for spacing */
    background-color: #fff;
    /* Background color */
}

.post-content {
    flex-grow: 1;
    padding-bottom: 10px;
}

.post h3 {
    color: #0077b6;
    margin-bottom: 10px;
}

.details-btn {
    background-color: #0077b6;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    display: block;
    width: 100%;
    text-align: center;
}

/* Clearfix for the float */
footer::after {
    content: "";
    display: table;
    clear: both;
}

aside {
    height: 100vh;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        float: none;
    }

    #post-grid {
        margin-left: 0;
    }
}

/* Style adjustments for the Create Post popup */
.popup-container {
    background: #193d50;
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000;
    /* High z-index to be on top */
    max-width: 625px;
    /* Maximum width of the form */
    width: 90%;
    /* Responsive width */
    height: 475px;
    /* Height based on content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

.ta {
    min-height: 100px;
    min-width: 575px;
    max-width: 575px;
    max-height: 100px;
}

.close-button {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    /* Larger close button */
    background: none;
    border: none;
}

/* Style the posts grid */
#post-grid {
    margin-left: 220px;
    /* Adjust this value as necessary */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    background-image: url('UCSC_Campus-from-above.jpg');
    /* Adjust the path to your image file */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* This will make sure the background image doesn't scroll with the page */
    min-height: 100vh;
    /* Minimum height to ensure it covers the viewport */
}

/* Style for individual posts */
.post {
    background-color: rgba(255, 255, 255, 0.9);
    /* Semi-transparent background for readability */
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    /* Add space between posts */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

/* ... additional existing styles ... */

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        position: relative;
        /* This will make the filters stack above the posts on smaller screens */
        order: 1;
        /* Assuming you're using flexbox on a parent container */
    }

    #post-grid {
        margin-left: 0;
        order: 2;
        /* This will ensure the posts grid comes after the filters */
    }
}
```

### tutoring.css

```css
/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Set a default font and line height */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

h3 {
    color: #0077b6;
}

.price-filter {
    width: 50px;
}

#overlay {
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    z-index: 999;
    /* Z-index lower than the popup */
}

/* Style the header section */
header {
    background-color: #0077b6;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header img {
    width: 90px;
}

/* Style for Create Post button */
.open-button {
    background-color: #fff;
    color: #0077b6;
    border: 1px solid #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 3px;
}

.open-button:hover {
    background-color: #003566;
    border-color: #003566;
    color: #ffc300;
    transition: 0.4s;
}

.popup-container button {
    width: 100px;
    height: 25px;
    align-items: center;
    border-radius: 10px;
    color: white;
    background-color: #000814;
}

/* Style the filters sidebar */
#filters {
    background-color: #f0f0f0;
    padding: 20px;
    width: 200px;
    float: left;
}

#filters ul {
    list-style-type: none;
}

#filters ul li label {
    margin-left: 5px;
}

/* Style the posts grid */
#post-grid {
    margin-left: 220px;
    /* Width of filters + some extra space */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
}

.post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: 1px solid #ccc;
    /* Add a border */
    border-radius: 10px;
    /* Rounded corners for a 3D effect */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    /* Add a shadow for depth */
    padding: 15px;
    /* Increase padding for spacing */
    background-color: #fff;
    /* Background color */
}

.post-content {
    flex-grow: 1;
    padding-bottom: 10px;
}

.post h3 {
    color: #0077b6;
    margin-bottom: 10px;
}

.details-btn {
    background-color: #0077b6;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    display: block;
    width: 100%;
    text-align: center;
}

/* Clearfix for the float */
footer::after {
    content: "";
    display: table;
    clear: both;
}

aside {
    height: 100vh;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        float: none;
    }

    #post-grid {
        margin-left: 0;
    }
}

/* Style adjustments for the Create Post popup */
.popup-container {
    background: #193d50;
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000;
    /* High z-index to be on top */
    max-width: 625px;
    /* Maximum width of the form */
    width: 90%;
    /* Responsive width */
    height: 475px;
    /* Height based on content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

.ta {
    min-height: 100px;
    min-width: 575px;
    max-width: 575px;
    max-height: 100px;
}

.close-button {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    /* Larger close button */
    background: none;
    border: none;
}

/* Style the posts grid */
#post-grid {
    margin-left: 220px;
    /* Adjust this value as necessary */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    background-image: url('bora_UCSC_McHenryLibrary_07.jpg');
    /* Adjust the path to your image file */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* This will make sure the background image doesn't scroll with the page */
    min-height: 100vh;
    /* Minimum height to ensure it covers the viewport */
}

/* Style for individual posts */
.post {
    background-color: rgba(255, 255, 255, 0.9);
    /* Semi-transparent background for readability */
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    /* Add space between posts */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

/* ... additional existing styles ... */

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        position: relative;
        /* This will make the filters stack above the posts on smaller screens */
        order: 1;
        /* Assuming you're using flexbox on a parent container */
    }

    #post-grid {
        margin-left: 0;
        order: 2;
        /* This will ensure the posts grid comes after the filters */
    }
}
```

### lostnfound.css

```css
/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Set a default font and line height */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

h3 {
    color: #0077b6;
}

.price-filter {
    width: 50px;
}

#overlay {
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
    z-index: 999;
    /* Z-index lower than the popup */
}

/* Style the header section */
header {
    background-color: #0077b6;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header img {
    width: 90px;
}

/* Style for Create Post button */
.open-button {
    background-color: #fff;
    color: #0077b6;
    border: 1px solid #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 3px;
}

.open-button:hover {
    background-color: #003566;
    border-color: #003566;
    color: #ffc300;
    transition: 0.4s;
}

.popup-container button {
    width: 100px;
    height: 25px;
    align-items: center;
    border-radius: 10px;
    color: white;
    background-color: #000814;
}

/* Style the filters sidebar */
#filters {
    background-color: #f0f0f0;
    padding: 20px;
    width: 200px;
    float: left;
}

#filters ul {
    list-style-type: none;
}

#filters ul li label {
    margin-left: 5px;
}

/* Style the posts grid */
#post-grid {
    margin-left: 220px;
    /* Width of filters + some extra space */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
}

.post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: 1px solid #ccc;
    /* Add a border */
    border-radius: 10px;
    /* Rounded corners for a 3D effect */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    /* Add a shadow for depth */
    padding: 15px;
    /* Increase padding for spacing */
    background-color: #fff;
    /* Background color */
}

.post-content {
    flex-grow: 1;
    padding-bottom: 10px;
}

.post h3 {
    color: #0077b6;
    margin-bottom: 10px;
}

.details-btn {
    background-color: #0077b6;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    display: block;
    width: 100%;
    text-align: center;
}

/* Clearfix for the float */
footer::after {
    content: "";
    display: table;
    clear: both;
}

aside {
    height: 100vh;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        float: none;
    }

    #post-grid {
        margin-left: 0;
    }
}

/* Style adjustments for the Create Post popup */
.popup-container {
    background: #193d50;
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000;
    /* High z-index to be on top */
    max-width: 625px;
    /* Maximum width of the form */
    width: 90%;
    /* Responsive width */
    height: 475px;
    /* Height based on content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

.ta {
    min-height: 100px;
    min-width: 575px;
    max-width: 575px;
    max-height: 100px;
}

.close-button {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    /* Larger close button */
    background: none;
    border: none;
}

/* Style the posts grid */
#post-grid {
    margin-left: 220px;
    /* Adjust this value as necessary */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    background-image: url('campus-and-monterey-bay-scaled.jpg');
    /* Adjust the path to your image file */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* This will make sure the background image doesn't scroll with the page */
    min-height: 100vh;
    /* Minimum height to ensure it covers the viewport */
}

/* Style for individual posts */
.post {
    background-color: rgba(255, 255, 255, 0.9);
    /* Semi-transparent background for readability */
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    /* Add space between posts */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

/* ... additional existing styles ... */

/* Responsive adjustments */
@media (max-width: 768px) {
    #filters {
        width: 100%;
        position: relative;
        /* This will make the filters stack above the posts on smaller screens */
        order: 1;
        /* Assuming you're using flexbox on a parent container */
    }

    #post-grid {
        margin-left: 0;
        order: 2;
        /* This will ensure the posts grid comes after the filters */
    }
}
```

[7 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]