Skip to content

Commit

Permalink
tailwindcss
Browse files Browse the repository at this point in the history
  • Loading branch information
@VIRUXE
VIRUXE committed Nov 26, 2024
1 parent a77b792 commit 39a5efe
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 144 deletions.
96 changes: 72 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,49 +9,97 @@
<meta name="author" content="Hondatabase">

<title>Honda OBD0/1 ECU Component List - Hondatabase</title>
<link rel="stylesheet" href="style.css">

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
honda: '#E62129'
},
fontFamily: {
sans: ['Segoe UI', 'Tahoma', 'Geneva', 'Verdana', 'sans-serif']
},
fontSize: {
'xxs': '0.7rem'
}
}
}
}
</script>
<style>
@media print {
body { font-size: 0.8rem !important; }

header p, header small { display: none; }

a {
color: inherit;
text-decoration: none;
}

table {
width: 100% !important;
min-width: 100% !important;
margin-bottom: 2em;
}

tr { page-break-inside: avoid; }

span.eletrical-spec { line-height: 2em; }

#author {
position: static;
text-transform: uppercase;
}

#legend { position: static; }
}
</style>
</head>
<body>
<body class="font-sans m-0 p-5">
<header>
<span id="author">hondatabase.com</span>
<h1>Honda OBD0/1 ECU Component List</h1>
<span id="author" class="fixed top-1 right-2">hondatabase.com</span>
<h1 class="text-2xl font-bold">Honda OBD0/1 ECU Component List</h1>
<p>This page contains a comprehensive list of components found in Honda OBD0 and OBD1 ECUs. Compiled from various sources, it serves as a reference for those working with Honda ECUs.</p>
<p>If you would like to share data or fix something, please submit a pull request on GitHub or open an Issue.</p>
<p>This page is both print and smaller-device friendly.</p>
<small>
<p>You can download this list as JSON from the <a href="hondaecucomponents.json" target="_blank" rel="noopener noreferrer">same directory</a>.</p>
<p>To edit this list, visit the <a href="https://github.com/hondatabase/ecucomponents/edit/main/hondaecucomponents.json" target="_blank" rel="noopener noreferrer">JSON file on GitHub</a>.</p>
<p>To view the source images from which this data was extracted, visit the <a href="https://files.hondatabase.com/ecu-components/componentlist" target="_blank">images</a> directory.</p>
<p>For any feedback, please <a href="mailto:hondatabase@flaviopereira.dev?subject=Contribute to Honda ECU Component List">e-mail</a> me.</p>
<p>You can download this list as JSON from the <a href="hondaecucomponents.json" class="text-honda" target="_blank" rel="noopener noreferrer">same directory</a>.</p>
<p>To edit this list, visit the <a href="https://github.com/hondatabase/ecucomponents/edit/main/hondaecucomponents.json" class="text-honda" target="_blank" rel="noopener noreferrer">JSON file on GitHub</a>.</p>
<p>To view the source images from which this data was extracted, visit the <a href="https://files.hondatabase.com/ecu-components/componentlist" class="text-honda" target="_blank">images</a> directory.</p>
<p>For any feedback, please <a href="mailto:hondatabase@flaviopereira.dev?subject=Contribute to Honda ECU Component List" class="text-honda">e-mail</a> me.</p>
</small>
</header>
<main>
<h2>Components</h2>
<div id="table-container">
<table>
<h2 class="text-xl font-semibold">Components</h2>
<div id="table-container" class="overflow-x-auto">
<table class="min-w-full border-collapse table-auto sm:min-w-max">
<thead>
<th style="width: auto;">ID(s)</th>
<th>Type</th>
<th>Specs</th>
<th>Notes</th>
<tr>
<th class="bg-gray-300 border border-black p-2 font-medium w-auto">ID(s)</th>
<th class="bg-gray-300 border border-black p-2 font-medium">Type</th>
<th class="bg-gray-300 border border-black p-2 font-medium">Specs</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="legend">
<p>Boards:</p>
<ul>
<li><strong>OBD0</strong>: N/A</li>
<li><strong>OBD1</strong>: 11F0, 1720, 1980</li>
<div id="legend" class="fixed bottom-0 left-0 p-1 px-2.5 text-sm bg-gray-200 w-full print:static border-t border-gray-300">
<p class="inline">Boards:</p>
<ul class="inline">
<li class="inline"><strong>OBD0</strong>: N/A</li>
<li class="inline"><strong>OBD1</strong>: 11F0, 1720, 1980</li>
</ul>
</div>
</main>
<footer>
<div id="credits">
<h2>Credits:</h2>
<ul></ul>
<div id="credits" class="text-sm my-5">
<h2 class="text-lg font-semibold">Credits:</h2>
<ul class="m-0"></ul>
</div>
<footer>
</footer>
<script src="script.js"></script>
</body>
</html>
40 changes: 25 additions & 15 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@

fetch('./hondaecucomponents.json')
.then(data => data.json())
.then(json => {
const tbody = document.getElementsByTagName('tbody')[0];

const table = document.getElementsByTagName('table')[0];
if (!json.components) return;

json.components.forEach(componentsNode => {
const componentTbody = document.createElement('tbody');
componentTbody.className = 'print:break-inside-avoid';

const tr = document.createElement('tr');
tr.className = 'transition-colors duration-200 hover:text-white hover:bg-honda even:bg-gray-200';

Object.values(componentsNode).forEach((property, propertyIndex) => {
if (propertyIndex > 3) return;

if (propertyIndex > 2) return; // Only process first 3 columns
let html = property;
const td = document.createElement('td');
td.className = 'border border-black p-2 text-left whitespace-nowrap';
if (propertyIndex === 0) td.classList.add('font-medium');

if (propertyIndex === 0) {
html = property.join(', ');

if (componentsNode.boards) {
const sup = document.createElement('sup');
sup.className = 'ml-1 text-xxs';
sup.title = 'ECU Board(s)';
sup.innerHTML = componentsNode.boards.join(', ');
html += sup.outerHTML;
}

td.dataset.original = html;
} else if (propertyIndex === 2) {
const regex = /\(([^)]*(OHM|A|V|W|uF|pF|MHz)[^)]*)\)/g;
let match;

while (match = regex.exec(property)) {
let content = match[1];
let unit = content.split(' ').pop();
Expand All @@ -39,7 +40,7 @@ fetch('./hondaecucomponents.json')
unit === 'W' ? 'Watts' :
unit === 'uF' ? 'µF' : unit;
content = content.replace(unit, symbol);
html = html.replace(match[0], `<span class="eletrical-spec">${content}</span>`);
html = html.replace(match[0], `<span class="mr-1 rounded-full border border-black italic text-xs font-medium px-1.5 whitespace-nowrap">${content}</span>`);
td.dataset.original = (td.dataset.original || '') + ` ${content}`;
}
} else {
Expand All @@ -50,26 +51,35 @@ fetch('./hondaecucomponents.json')
tr.appendChild(td);
});

tbody.appendChild(tr);
componentTbody.appendChild(tr);

// Add notes row if it exists
if (componentsNode.notes && componentsNode.notes !== '') {
const notesRow = document.createElement('tr');
notesCell.colSpan = 3;
notesCell.className = 'border border-black p-2 pl-8 text-left bg-gray-50 italic text-gray-600';
notesCell.innerHTML = componentsNode.notes;
notesRow.appendChild(notesCell);
componentTbody.appendChild(notesRow);
}

table.appendChild(componentTbody);
});
const credits = document.querySelector('#credits > ul');

const credits = document.querySelector('#credits > ul');
if (json.credits) {
json.credits.forEach(node => {
const li = document.createElement('li');

if (node.link) {
const a = document.createElement('a');

a.href = node.link;
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.className = 'text-honda';
a.innerHTML = node.group ? `${node.name} (<i>${node.group}</i>)` : node.name;

li.appendChild(a);
} else
li.innerHTML = node.name;

credits.appendChild(li);
});
}
Expand Down
105 changes: 0 additions & 105 deletions style.css
View file

This file was deleted.

0 comments on commit 39a5efe

Please sign in to comment.