diff --git a/docs/_config.yml b/docs/_config.yml index 459ba49..e4a6cf2 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -3,6 +3,7 @@ title: Open EV Data description: Open Dataset of Electric Vehicles and their specs domain: opendata.kilowattcharging.com url: https://opendata.kilowattcharging.com +baseurl: "" # GitHub metadata github: @@ -10,4 +11,13 @@ github: owner_url: https://github.com/KilowattApp repository_url: https://github.com/KilowattApp/open-ev-data +# Navigation +navigation: + - title: Home + url: / + - title: Search + url: /search + - title: Suggest Vehicle + url: /suggest + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index d5ca515..d276171 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -4,61 +4,33 @@ {{ page.title }} - {{ site.title }} - +
-

{{ site.title }}

-
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css new file mode 100644 index 0000000..7c59c63 --- /dev/null +++ b/docs/assets/css/style.css @@ -0,0 +1,149 @@ +:root { + /* Main colors */ + --kw-darker-green: #70CF96; + --kw-dark-blue: #9CDDE3; + --kw-green: #85F5B1; + --kw-main-blue: #2D9CDB; + --kw-light-blue: #A7ECF2; + --kw-eighty-percent: #F2CA4D; + + /* Text and background colors */ + --text-primary: #24292e; + --text-secondary: #586069; + --bg-primary: #f5fbfc; /* Very light blue-green tint */ + --bg-white: #ffffff; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + line-height: 1.6; + max-width: 800px; + margin: 0 auto; + padding: 2rem; + color: var(--text-primary); + background: var(--bg-primary); +} + +.site-header { + text-align: center; + padding: 2rem 1rem 3rem; + margin: -2rem -2rem 0 -2rem; +} + +.site-title { + margin: 0; + font-size: 2.5rem; + font-weight: 600; + color: var(--text-primary); +} + +.site-description { + margin: 0.5rem 0 0; + color: var(--text-secondary); + font-size: 1.1rem; +} + +.main-nav { + padding: 1rem; + margin: -2rem -2rem 2rem -2rem; + text-align: center; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +.main-nav a { + color: var(--text-primary); + text-decoration: none; + padding: 0.5rem 1rem; + margin: 0 0.5rem; + border-radius: 4px; + transition: all 0.2s; +} + +.main-nav a:hover { + background: var(--kw-light-blue); + color: var(--text-primary); +} + +.main-nav a.active { + background: var(--kw-darker-green); + color: white; +} + +.github-link { + background: var(--text-primary) !important; + color: white !important; +} + +.github-link:hover { + background: var(--kw-main-blue) !important; +} + +/* Form styling */ +.form-section { + background: var(--bg-white); + border-left: 4px solid var(--kw-darker-green); +} + +.submit-button { + background: var(--kw-main-blue); +} + +.submit-button:hover { + background: var(--kw-dark-blue); +} + +/* Search styling */ +.search-box input { + border-color: var(--kw-darker-green); +} + +.search-box input:focus { + box-shadow: 0 0 0 2px var(--kw-light-blue); +} + +/* Links */ +a { + color: var(--kw-main-blue); + text-decoration: none; +} + +a:hover { + color: var(--kw-darker-green); +} + +/* Headings */ +h1, h2, h3, h4, h5, h6 { + color: var(--text-primary); + padding-bottom: 0.3em; +} + +/* Code blocks */ +code { + background-color: #f6f8fa; + border: 1px solid var(--kw-light-blue); +} + +/* Footer */ +footer { + margin-top: 2rem; + padding-top: 2rem; + border-top: 3px solid var(--kw-darker-green); + color: var(--text-secondary); + font-size: 0.9rem; +} + +.github-icon { + display: inline-block; + vertical-align: text-bottom; +} + +img { + max-width: 100%; + height: auto; +} + +pre code { + display: block; + padding: 1rem; + overflow-x: auto; +} \ No newline at end of file diff --git a/docs/assets/css/suggest.css b/docs/assets/css/suggest.css new file mode 100644 index 0000000..eb9527c --- /dev/null +++ b/docs/assets/css/suggest.css @@ -0,0 +1,138 @@ +.suggestion-container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + box-sizing: border-box; +} + +.form-section { + margin-bottom: 30px; + padding: 25px; + background: #f5f5f5; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + box-sizing: border-box; +} + +.form-section h3 { + margin-top: 0; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 2px solid #e0e0e0; + color: #333; +} + +.form-group { + margin-bottom: 20px; + display: grid; + grid-template-columns: minmax(150px, 200px) minmax(200px, 1fr); + gap: 15px; + align-items: center; + box-sizing: border-box; +} + +label { + font-weight: 600; + color: #444; +} + +label[for="sources"] { + align-self: start; + padding-top: 8px; +} + +input[type="text"], +input[type="number"], +select, +textarea { + width: 100%; + max-width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; + transition: border-color 0.2s, box-shadow 0.2s; + box-sizing: border-box; +} + +input[type="text"]:focus, +input[type="number"]:focus, +select:focus, +textarea:focus { + outline: none; + border-color: #4CAF50; + box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1); +} + +/* Add units after input fields */ +.form-group.with-unit { + position: relative; +} + +.form-group.with-unit input { + padding-right: 45px; +} + +.form-group.with-unit::after { + content: attr(data-unit); + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + color: #666; + font-size: 14px; +} + +textarea { + height: 100px; + resize: vertical; + font-family: inherit; +} + +.submit-button { + background: #4CAF50; + color: white; + padding: 12px 24px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + width: 100%; + max-width: 300px; + margin: 20px auto 0; + display: block; + transition: background-color 0.2s; +} + +.submit-button:hover { + background: #45a049; +} + +.error { + color: #ff0000; + font-size: 14px; + margin-top: 5px; + grid-column: 2; +} + +/* Required field indicator */ +label.required::after { + content: " *"; + color: #ff0000; +} + +/* Responsive design */ +@media (max-width: 600px) { + .form-group { + grid-template-columns: 1fr; + gap: 8px; + } + + label { + margin-bottom: 5px; + } + + .error { + grid-column: 1; + } +} \ No newline at end of file diff --git a/docs/assets/js/suggest.js b/docs/assets/js/suggest.js new file mode 100644 index 0000000..06d0cdf --- /dev/null +++ b/docs/assets/js/suggest.js @@ -0,0 +1,123 @@ +document.addEventListener('DOMContentLoaded', async function() { + const form = document.getElementById('vehicleSuggestionForm'); + const brandSelect = document.getElementById('brand'); + const modelContainer = document.getElementById('modelContainer'); + let vehicleData = []; + + try { + // Fetch the data + const response = await fetch('https://raw.githubusercontent.com/KilowattApp/open-ev-data/refs/heads/master/data/ev-data.json'); + const data = await response.json(); + vehicleData = data.data; + + // Get unique brands and sort them + const brands = [...new Set(vehicleData.map(vehicle => vehicle.brand))].sort(); + + // Populate brands dropdown + brands.forEach(brand => { + const option = document.createElement('option'); + option.value = brand; + option.textContent = brand; + brandSelect.appendChild(option); + }); + + } catch (error) { + console.error('Error loading brands:', error); + const option = document.createElement('option'); + option.textContent = 'Error loading brands'; + brandSelect.appendChild(option); + } + + // Function to create model selection UI + function createModelSelection(brand) { + // Get all models for selected brand + const models = [...new Set(vehicleData + .filter(vehicle => vehicle.brand === brand) + .map(vehicle => vehicle.model) + )].sort(); + + // Create the HTML for model selection + const html = ` +
+ + +
+ + `; + + modelContainer.innerHTML = html; + + // Add event listener for model select + const modelSelect = document.getElementById('modelSelect'); + const newModelInput = document.getElementById('newModelInput'); + const modelInput = document.getElementById('model'); + + modelSelect.addEventListener('change', function() { + if (this.value === 'new') { + newModelInput.style.display = 'grid'; + modelInput.required = true; + modelInput.value = ''; + } else { + newModelInput.style.display = 'none'; + modelInput.required = false; + modelInput.value = this.value; + } + }); + } + + // Handle brand selection + brandSelect.addEventListener('change', function() { + if (this.value) { + createModelSelection(this.value); + } else { + modelContainer.innerHTML = ''; + } + }); + + // Rest of the form submission code... + if (form) { + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const formData = new FormData(form); + const modelSelect = document.getElementById('modelSelect'); + const modelValue = modelSelect.value === 'new' ? + document.getElementById('model').value : + modelSelect.value; + + const title = `Vehicle Suggestion: ${formData.get('brand')} ${modelValue}`; + const body = ` +Vehicle Details: +- Brand: ${formData.get('brand')} +- Model: ${modelValue} +- Type: ${formData.get('vehicleType')} +- Battery Capacity: ${formData.get('batteryCapacity')} kWh +- AC Charging Power: ${formData.get('maxAcChargingPower')} kW +- DC Charging Power: ${formData.get('maxDcChargingPower')} kW +- Consumption: ${formData.get('consumption')} kWh/100km + +Sources: +${formData.get('sources')} + `.trim(); + + const issueUrl = `https://github.com/KilowattApp/open-ev-data/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`; + + window.open(issueUrl, '_blank'); + + const successMsg = document.createElement('div'); + successMsg.className = 'success'; + successMsg.textContent = 'Thank you for your suggestion! You will be redirected to GitHub to create an issue.'; + form.appendChild(successMsg); + + form.reset(); + modelContainer.innerHTML = ''; + }); + } +}); \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 89d22d1..1c87613 100644 --- a/docs/index.md +++ b/docs/index.md @@ -3,8 +3,6 @@ layout: default title: Home --- -Open Dataset of Electric Vehicles and their specs. - ## Overview In contrast to ICE cars, electric vehicles have very different behaviors in terms of charging and charging speed. Having reliable data about a car is key for developing EV-related applications. diff --git a/docs/suggest.md b/docs/suggest.md new file mode 100644 index 0000000..766eaab --- /dev/null +++ b/docs/suggest.md @@ -0,0 +1,80 @@ +--- +layout: default +title: Suggest a Vehicle +--- + +
+

Suggest a New Vehicle

+

Help us expand our database by suggesting a new electric vehicle model.

+ +
+ +
+

Basic Information

+
+ + +
+ +
+ +
+ +
+ + +
+
+ + +
+

Battery & Charging

+
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+

Performance

+
+ + +
+
+ +
+

Additional Information

+
+ + +
+
+ + +
+
+ + + \ No newline at end of file