# Project export: Peter Parking

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: spiderman finds parking through this app
- Devpost: https://devpost.com/software/peter-parking
- GitHub: https://github.com/akdbsdud6/akdbsdud6.github.io
- Video: https://www.youtube.com/embed/JVp8-cNpKzU?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 1 GitHub contributor(s) — akdbsdud6 (9 commits)

## Devpost submission (written by the team)

### Inspiration

Driving uphill through many different colleges to look for parking spots is tiring and time-consuming. Being late to class solely due to parking isn't rare. We thought we should solve this problem that students from all backgrounds are currently facing.

### What it does

Peter Parking shows available parking lots throughout the UCSC campus based on user interactions. People can report how many parking spots were available at a certain parking lot, and that information gets saved into our data storage and becomes available to view on the website.

### How we built it

We used html, css, and js to build our website, and we used Flask to transfer user reports from the website to Python where the data gets stored.

### Challenges we ran into

As a team of beginner coders, our biggest challenge was connecting the website (frontend) to our data storage (backend). We watched countless tutorials on YouTube and finally found our way to navigate through this using Flask, a program that works as a bridge between python codes and html/css/js.

### Accomplishments we're proud of

We're proud of ourselves for starting with 0 and ending with a 1; we learned so many new assets by problem-solving real challenges we faced during development of Peter Parking.

### What we learned

We learned the importance of prior planning, teamwork, dedication and strong mentality during day 1 of CruzHacks, as we were still lost on what idea to materialize until the very start of day 2. However we were able to gather and push ourselves toward our goal and finally made it happen.

### What's next

Our first step for improving Peter Parking is adding a server so people can check the parking status on campus from anywhere. Next is making Peter Parking show the status for every single parking lot on campus, and last is adding motorcycle and bicycle parking lot supports.

## README (from the GitHub repository)


# Parking Map Project

## Introduction
This interactive parking map is a web application that helps users find and report available parking spots. It integrates a Python Flask backend with a frontend using HTML, CSS, and JavaScript.

## Features
- Interactive map interface with clickable buttons for parking lots.
- Dropdown menus displaying parking lot names and available spots.
- User-reporting feature for updating parking availability.

## Technology Stack
- **Backend:** Python, Flask
- **Frontend:** HTML, CSS, JavaScript

## Installation and Setup
To run this project locally, follow these steps:

### Prerequisites
- Python 3.6 or higher
- Flask

### Installation
1. Clone the repository:
   ```
   git clone [repository URL]
   ```
2. Navigate to the project directory:
   ```
   cd [project-directory]
   ```
3. Install Flask and other dependencies:
   ```
   pip install -r requirements.txt
   ```

#### Run the Flask App
1. Open a terminal or command prompt.
2. Navigate to the directory containing `dict.py`.
3. Start the Flask server:
   ```
   python dict.py
   ```

#### Run the Frontend
- You can access the application through the provided website URL(https://akdbsdud6.github.io/).

#### Connect Frontend to Backend
- Ensure your frontend JavaScript fetch requests are pointed to your Flask server (e.g., `http://localhost:5000/get_parking_data/Stevenson`).

## Usage
- Navigate the map to view different parking lots.
- Click on parking lot buttons to see details and availability.
- Use the 'Report' feature to update the availability of parking spots.

## Detected evidence (automated analysis)

Indexed codebase: 4 recognized source files, 28 KB.
- CSS (language) — detected in the code
- Flask (technology) — detected in the code
- HTML (language) — detected in the code
- Python (language) — detected in the code
- JavaScript (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (5 of 5)

```
dict.py
index.html
README.md
requirements.txt
style.css
```

### Dependencies

- requirements.txt: Flask@==2.1.1

### Recent commits (newest first)

- Add files via upload
- Add files via upload
- Add files via upload
- Add files via upload
- Add files via upload
- Add files via upload
- Add files via upload
- Add files via upload
- Initial commit

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

### requirements.txt

```
Flask==2.1.1
```

### dict.py

```python
from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Your existing parking_data dictionary

parking_data = {
    #Cowell, Stevenson, Crown, Merrill, Porter, Kresge, Oakes, Rachel Carson College, College Nine, and College Ten
    "Cowell": {"spots_available": 10},
    "Stevenson": {"spots_available": 10},
    "Crown": {"spots_available": 10},
    "Merrill": {"spots_available": 10},
    "Porter": {"spots_available": 10},
    "Kresge": {"spots_available": 10},
    "Oakes": {"spots_available": 10},
    "Rcarson": {"spots_available": 10},
    "Nine": {"spots_available": 10},
    "Ten": {"spots_available": 10},
    "West": {"spots_available": 10},
    "East": {"spots_available": 10}
    # Add more parking lots here
}




@app.route("/")
def index():
    return "UCSC Parking Website"

@app.route("/get_parking_data/<parking_lot>")
def get_parking_data(parking_lot):
    return jsonify(parking_data.get(parking_lot, "Parking lot not found"))

@app.route("/report", methods=['POST'])
def report_parking():
    data = request.json
    parking_lot = data.get('parking_lot')
    spots = data.get('spots')

    if parking_lot in parking_data and isinstance(spots, int):
        parking_data[parking_lot]['spots_available'] = spots
        return jsonify({"success": True})
    else:
        return jsonify({"success": False, "message": "Invalid data"}), 400

if __name__ == "__main__":
    app.run(debug=True)

```

### style.css

```css
/*----------------Background Image---------------*/

/* Set up the body with no margin and hidden overflow */
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Hide scrollbars */
  height: 100%; /* Full height */
}

/* The background image */
.bg {
  /* The image used */
  background-image: url('parking_map.png');
  
  /* Full height */
  height: 100%;
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*----------------Header---------------*/

header {
    background-color: #003C6C; /* Deep blue */
    color: #FDC700; /* Vivid yellow */
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensures the header stays on top */
    font-family: 'Roboto', sans-serif; /* Optional if you've already applied it to the body */

}

h1 {
    margin: 0;
    font-size: 24px;
}

/* Adjust the .bg class to account for the header */
.bg {
    margin-top: 50px; /* Adjust this value based on your header's height */
    /* Other styles... */
}

/*----------------Header---------------*/

/*----------------Button Styles---------------*/
#eastButton {
    position: absolute; 
    top: 80%; 
    left: 69%; 
    transform: translate(-50%, -50%);
    font-size: 40px; 
    color: #003C6C; 
    cursor: pointer;
}

#merrilButton {
    position: absolute; 
    top: 29%; 
    left: 73%; 
    transform: translate(-50%, -50%);
    font-size: 40px; 
    color: #003C6C; 
    cursor: pointer;
}

#rcarsonButton {
    position: absolute; 
    top: 80%; 
    left: 40%; 
    transform: translate(-50%, -50%);
    font-size: 40px; 
    color: #003C6C; 
    cursor: pointer;
}

#kresgeButton {
    position: absolute; 
    top: 35%; 
    left: 40%; 
    transform: translate(-50%, -50%);
    font-size: 40px; 
    color: #003C6C; 
    cursor: pointer;
}


/*----------------Dropdown Menu Merril---------------*/

/* Center align text within the box */
#merrilAvailableSpots {
    text-align: center;
}

/* Dropdown Menu Styles */
.merrilDropDown-Content {
    display: none; /* Hide dropdown by default */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 20;
    font-family: 'Roboto', sans-serif;  
    border-radius: 10px; /* Rounded corners */
}

/* Report Button Style */
#merrilReportButton {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin-top: 10px; /* Spacing from the text */
    background-color: #003C6C; /* Example button color */
    color: #FDC700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;  
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 10px; /* Rounded corners */

}

.merrilDropDown-Content {
    /* Existing styles... */
    top: 240px; /* Adjust this value */
    left: 978px; /* Adjust this value */
}

/* Dropdown Styles */
#merrilSpotSelector {
    /* Example styles */
    font-size: 16px;
    color: #333;
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 10px; /* Rounded corners */
    display: inline-block; /* Display inline with other elements */
    vertical-align: top; /* Align to the top */
    margin-right: 10px; /* Add some space to the right of the dropdown */
    margin-left: -0.8px; /* Push the dropdown to the left */
}

/*----------------Dropdown Menu East---------------*/

/* Center align text within the box */
#eastAvailableSpots {
    text-align: center;
}

/* Dropdown Menu Styles */
.eastDropDown-Content {
    display: none; /* Hide dropdown by default */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 20;
    font-family: 'Roboto', sans-serif;  
    border-radius: 10px; /* Rounded corners */
}

/* Report Button Style */
#eastReportButton {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin-top: 10px; /* Spacing from the text */
    background-color: #003C6C; /* Example button color */
    color: #FDC700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;  
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 10px; /* Rounded corners */

}

.eastDropDown-Content {
    /* Existing styles... */
    top: 450px; /* Adjust this value */
    left: 1085px; /* Adjust this value */
}

/* Dropdown Styles */
#eastSpotSelector {
    /* Example styles */
    font-size: 16px;
    color: #333;
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 10px; /* Rounded corners */
    display: inline-block; /* Display inline with other elements */
    vertical-align: top; /* Align to the top */
    margin-right: 10px; /* Add some space to the right of the dropdown */
    margin-left: -0.8px; /* Push the dropdown to the left */
}

/*----------------Dropdown Menu Rcarson---------------*/

/* Center align text within the box */
#rcarsonAvailableSpots {
    text-align: center;
}

/* Dropdown Menu Styles */
.rcarsonDropDown-Content {
    display: none; /* Hide dropdown by default */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 20;
    font-family: 'Roboto', sans-serif;  
    border-radius: 10px; /* Rounded corners */
}

/* Report Button Style */
#rcarsonReportButton {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin-top: 10px; /* Spacing from the text */
    background-color: #003C6C; /* Example button color */
    col
[truncated — 3736 more characters]
```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale-1.0">
    <title>Parking Map</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">


</head>
<body>

<header>
    <h1>Peter Parking</h1>
</header>

<!--------------------------- Slug Images --------------------------->

<img id="mySquareImageOne" src="slug_image_one.png" alt="Slug Image One">
<img id="mySquareImageTwo" src="sluge_image_two.png" alt="Slug Image Two">
<img id="mySquareImageThree" src="slug_image_three.png" alt="Slug Image Three">
<img id="mySquareImageFour" src="slug_image_four.png" alt="Slug Image Four">



<!--------------------------- Merril Button Background --------------------------->
<div class="bg">
    <i class="fa-solid fa-location-dot" id="merrilButton"></i>

    <div id="merrilDropDownMenu" class="merrilDropDown-Content">
            <p>Merril Lot 119  ‎ ‎‎ / ‎ ‎  <span id="merrilAvailableSpots">20</span> </p>
        <button id="merrilReportButton">Report</button>
        <select id="merrilSpotSelector" style="display: none;">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10+">10+</option>
        </select>
    </div>
</div>

<!--------------------------- East Button Background --------------------------->
<div class="bg">
    <i class="fa-solid fa-location-dot" id="eastButton"></i>

    <div id="eastDropDownMenu" class="eastDropDown-Content">
            <p>East Remote  ‎ ‎‎ / ‎ ‎  <span id="eastAvailableSpots">20</span> </p>
        <button id="eastReportButton">Report</button>
        <select id="eastSpotSelector" style="display: none;">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10+">10+</option>
        </select>
    </div>
</div>

<!--------------------------- Rcarson Button Background --------------------------->
<div class="bg">
    <i class="fa-solid fa-location-dot" id="rcarsonButton"></i>

    <div id="rcarsonDropDownMenu" class="rcarsonDropDown-Content">
            <p>Rcarson Lot 162  ‎ ‎‎ / ‎ ‎  <span id="rcarsonAvailableSpots">20</span> </p>
        <button id="rcarsonReportButton">Report</button>
        <select id="rcarsonSpotSelector" style="display: none;">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10+">10+</option>
        </select>
    </div>
</div>

<!--------------------------- Kresge Button Background --------------------------->
<div class="bg">
    <i class="fa-solid fa-location-dot" id="kresgeButton"></i>

    <div id="kresgeDropDownMenu" class="kresgeDropDown-Content">
            <p>Kresge Lot 157  ‎ ‎‎ / ‎ ‎  <span id="kresgeAvailableSpots">20</span> </p>
        <button id="kresgeReportButton">Report</button>
        <select id="kresgeSpotSelector" style="display: none;">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10+">10+</option>
        </select>
    </div>
</div>

<!--------------------------- Script --------------------------->

<script>

/* --------------------------- Merril Button Script --------------------------- */

// JavaScript for dropdown toggle
document.getElementById("merrilButton").onclick = function() {
    var dropdown = document.getElementById("merrilDropDownMenu");
    dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
};

document.getElementById('merrilReportButton').addEventListener('click', function() {
    var selector = document.getElementById('merrilSpotSelector');
    selector.style.display = selector.style.display === 'none' ? 'block' : 'none';
});

// Function to update display
function merrilUpdateDisplay(spots) {
    var icon = document.getElementById('merrilButton');
    var spotsText = spots === '10+' ? '10+ Spots Available' : spots + ' Spots Available';
    document.getElementById('merrilAvailableSpots').innerText = spotsText; // Use spotsText here

    if (spots == 0) {
        icon.style.color = 'red'; // No spots available
    } else if (spots >= 1 && spots <= 2) {
        icon.style.color = '#DAA520'; // Darker yellow for few sp
[truncated — 9893 more characters]
```