Skip to content

Commit

Permalink
Added styles, tried fixing multiple submissions. Will come back later.
Browse files Browse the repository at this point in the history
  • Loading branch information
@JOOT49
JOOT49 committed Jul 8, 2024
1 parent 6ea3a5a commit a12dcc0
Show file tree
Hide file tree
Showing 6 changed files with 306 additions and 78 deletions.
73 changes: 73 additions & 0 deletions public/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/* styles.css */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
text-align: center;
}

form {
margin-top: 20px;
}

form label {
display: block;
margin-bottom: 8px;
}

form input[type="text"], form select {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

form button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

form button:hover {
background-color: #45a049;
}

.result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}

.result h3 {
margin-top: 0;
}

.result img {
display: block;
margin-top: 10px;
max-width: 100%;
height: auto;
}

220 changes: 148 additions & 72 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,146 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>License Plate Lookup</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2, h3 {
color: #333;
}

label {
font-weight: bold;
}

input[type="text"], select {
padding: 10px;
width: 100%;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

.result {
margin-top: 20px;
}

.result h3 {
margin-bottom: 10px;
color: #333;
}

.result p {
margin: 5px 0;
}

.result img {
margin-top: 10px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h1>License Plate Lookup</h1>
<div class="container">
<h1>License Plate Lookup</h1>

<div>
<p><a href="/input.html">Input New Data</a></p>
</div>
<div>
<p><a href="/input.html">Input New Data</a></p>
</div>

<div>
<h2>Lookup License Plate</h2>
<label for="lookupPlate">License Plate:</label>
<input type="text" id="lookupPlate" placeholder="Enter license plate"><br><br>
<label for="lookupState">State:</label>
<select id="lookupState">
<!-- Dropdown options for all states -->
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select><br><br>
<button onclick="lookupPlate()">Lookup</button>
</div>
<div class="form-section">
<h2>Lookup License Plate</h2>
<form id="lookupForm">
<label for="lookupPlate">License Plate:</label>
<input type="text" id="lookupPlate" placeholder="Enter license plate" required><br><br>
<label for="lookupState">State:</label>
<select id="lookupState" required>
<!-- Dropdown options for all states -->
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select><br><br>
<button onclick="lookupPlate()">Lookup</button>
</form>
</div>

<div id="result"></div>
<div id="result" class="result"></div>
</div>

<script>
async function lookupPlate() {
Expand All @@ -82,13 +152,19 @@ <h2>Lookup License Plate</h2>
const response = await fetch(`/lookup/${plate}/${state}`);
const data = await response.json();

if (data) {
if (data.length > 0) {
document.getElementById('result').innerHTML = `
<h3>Result</h3>
<p>License Plate: ${data.licensePlate}</p>
<p>State: ${data.state}</p>
<p>Bumper Sticker: ${data.bumperSticker}</p>
${data.image ? `<img src="${data.image}" alt="Bumper Sticker Image" width="200">` : ''}
<h3>Results</h3>
<ul>
${data.map(item => `
<li>
<p>License Plate: ${item.licensePlate}</p>
<p>State: ${item.state}</p>
<p>Bumper Sticker: ${item.bumperSticker}</p>
${item.image ? `<img src="${item.image}" alt="Bumper Sticker Image" width="200">` : ''}
</li>
`).join('')}
</ul>
`;
} else {
document.getElementById('result').innerHTML = `
Expand All @@ -99,4 +175,4 @@ <h3>No information found</h3>
}
</script>
</body>
</html>
</html>
Loading

0 comments on commit a12dcc0

Please sign in to comment.