Skip to content

Commit

Permalink
style: improve html page
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmasse
gmasse authored Dec 11, 2024
1 parent e61cfe5 commit e231077
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 35 deletions.
75 changes: 59 additions & 16 deletions site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,87 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPU Data Table</title>
<title>GPU Specs</title>
<!-- Include Handsontable CSS -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<style>
body {
font-family: 'Source Sans Pro', sans-serif;
color: black;
}
a {
color: black;
transition: color 0.3s;
}
a:hover {
color: #00acee;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px 40px;
}
.navbar .title {
font-size: 2em;
font-weight: bold;
}
.navbar .nav-link {
text-decoration: none;
}
footer {
margin-top: 40px;
border-top: 1px solid #ddd;
}

/* Overidding default handsonetable css */
.handsontable td {
.handsontable {
font-family: 'Source Sans Pro', sans-serif !important;
}
.colHeader {
.htCore th:first-child {
text-align: left;
font-weight: bold;
}
/* Custom cell style */
.attribute-column {
.htCore td:first-child {
font-weight: bold;
}
.htCore td:not(:first-child) {
text-align: center;
}
.colHeader {
font-weight: bold;
text-align: left;
}
.precision-FP32, .precision-TF32, .precision-FP8, .precision-INT4 {
background-color: #f0f0f0 !important; /* alternate backgound color */
}
.architecture-details {
background-color: #eef1ff !important;
background-color: #E5F8FF !important;
}
.data-cell {
text-align: center;
.architecture-details-border {
border-top: 1px solid #00acee !important;
}
.precision-FP32, .precision-TF32, .precision-FP8, .precision-INT4 {
background-color: #f0f0f0 !important; /* alternate backgound color */
}
</style>
</head>
<body>
<h1>GPU Specs</h1>
<div id="specs"></div>
<!-- Include Handsontable JS -->
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="table.js"></script>
<footer style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;">
<header class="navbar">
<div class="title">GPU Specs</div>
<a class="nav-link" href="https://github.com/gmasse/gpu-specs" target="_blank">
<span class="d-none d-sm-inline"> View on GitHub </span>
<svg viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-mark-github" aria-hidden="true"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg>
</a>
</header>
<main>
<div id="specs"></div>
<!-- Include Handsontable JS -->
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="table.js"></script>
</main>
<footer>
<h3>Data Conventions</h3>
<p>This page presents GPU specifications, following a standardized data structure to ensure clarity and consistency:</p>
<ul>
Expand Down
24 changes: 5 additions & 19 deletions site/table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,34 +99,20 @@ document.addEventListener("DOMContentLoaded", () => {
contextMenu: ['undo','redo','---------','hidden_columns_hide','hidden_columns_show'],
cells: (row, col) => {
const classes = [];
// class depending on the precision
if (row < architectureRowIndex) {
// get the precision from attributeName (before _)
// class depending on the precision
const precision = combinedData[row].Attribute.split(" ")[0] || combinedData[row].Attribute
classes.push(`precision-${precision}`);
} else {
if (row === architectureRowIndex) {
// class for the first row of Architecture Details section
classes.push("architecture-details-border");
}
// class for the Architecture Details section
classes.push("architecture-details");
}
// class for the first column
if (col === 0) {
classes.push("attribute-column");
}
else // class for the data cells
{
classes.push("data-cell");
}
return { className: classes.join(" ") };
},
customBorders: [
{
range: {
from: { row: architectureRowIndex, col: 0 },
to: { row: architectureRowIndex, col: Object.keys(rows).length },
},
top: { width: 1, color: "black" }, // Bold top border
},
],
});
})
.catch(error => console.error("Error loading JSON data:", error));
Expand Down

0 comments on commit e231077

Please sign in to comment.