Skip to content

Instantly share code, notes, and snippets.

@mhekel

mhekel/Bookinventory.md

Last active April 7, 2026 18:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhekel/5f30fb49aee8492f0f53830662c9d2b6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhekel/5f30fb49aee8492f0f53830662c9d2b6 to your computer and use it in GitHub Desktop.
Download ZIP
Book Inventory App
Raw
Bookinventory.md
Raw
index.html
<!-- Page heading -->
<h1>Book Inventory</h1>
<!-- Main table containing the book data -->
<table>
<!-- Table header section -->
<thead>
<tr>
<!-- Column labels -->
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
</thead>
<!-- Table body containing book entries -->
<tbody>
<!-- Each row represents one book -->
<tr class="to-read">
<td>Ghost Recon: Combat Ops</td>
<td>Tom Clancy</td>
<td>Fiction</td>
<td><span class="status">To Read</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
<tr class="in-progress"> <!-- Book currently being read -->
<td>Ghost Recon</td>
<td>Tom Clancy</td>
<td>Fiction</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
<tr class="in-progress"> <!-- Book marked as "in-progress" -->
<td>Post Mortem</td>
<td>Patricia Cornwell</td>
<td>Fiction, Crime</td>
<td><span class="status">In-Progress</span></td> <!-- Status badge -->
<td><span class="rate three"><span></span><span></span><span></span></span></td> <!-- 3-star rating -->
</tr>
<tr class="read">
<td>The Coffin Dancer</td>
<td>Jeffery Deaver</td>
<td> Fiction</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span></span><span></span><span></span></span></td> <!-- 1-star rating -->
</tr>
<tr class="to-read"> <!-- Book marked as "to read" -->
<td>The Bone Collector</td>
<td>Jeffery Deaver</td>
<td>Fiction</td>
<td><span class="status">To Read</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td> <!-- No rating class (0 stars) -->
</tr>
<tr class="read">
<td>The Lincoln Lawyer</td>
<td>John Grisham</td>
<td>Fiction</td>
<td><span class="status">Read</span></td>
<td><span class="rate two"><span></span><span></span><span></span></span></td> <!-- 2-star rating -->
</tr>
<tr class="read">
<td>Along came a spider</td>
<td>James Patterson</td>
<td>Fiction</td>
<td><span class="status">Read</span></td>
<td><span class="rate three"><span></span><span></span><span></span></span></td> <!-- 3-star rating -->
</tr>
</tbody>
</table>
</body>
</html>
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Syne:wght@400..800&display=swap');
*{
box-sizing: border-box;
}
/* ------------------------------------------- */
/* General font and layout styling */
/* ------------------------------------------- */
body {
font-family: 'Segoe UI', Syne, Geneva, Verdana, sans-serif; /* Modern, clean font stack */
background-color: #E5e5e5; /* Neutral-200 background for contrast */
margin: 10px;
padding: 0;
color: #333; /* Base text color */
}
/* Center the page content and limit width for readability */
table {
margin: auto;
width: 90%;
max-width: 1000px;
border-collapse: collapse;
box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.9);
background-color: white;
border-radius: 8px;
overflow: hidden;
}
table {
border: 2px solid #000;
}
/* Table header styling */
thead tr {
background-color: #fff;
text-align: left;
border: 1px solid #111;
}
/* Cell padding and alignment */
th, td {
padding: 10px 8px;
text-align: left;
}
/* Add separation between table body rows */
tbody tr + tr {
border-top: 1px solid #222;
}
/* Headline styles */
h1 {
text-align: center;
font-size: 2.5em;
margin-bottom: 32px;
color: #4b5563;
font-family: "Bricolage Grotesque", sans-serif;
}
/* ------------------------------------------- */
/* Row background gradients and text colors */
/* ------------------------------------------- */
tr[class="read"] {
background-image: linear-gradient(to right, #fff1f2, #ffe1f2); /* red for... read */
color: #1a1a1a; /* very dark gray text */
}
tr[class="to-read"] {
background-image: linear-gradient(to right, #f5f3ff, #ede9fe); /* muted violet to dusty violet */
color: #2e1a47; /* dark purple text */
}
tr[class="in-progress"] {
background-image: linear-gradient(to right, #f7fee7, #ecfccb); /* mint green to soft blue */
color: #064e3b; /* dark teal-green for text */
}
/* ------------------------------------------- */
/* Generic span styling */
/* ------------------------------------------- */
span {
display: inline-block;
}
/* ------------------------------------------- */
/* Status span styling (by row type) */
/* ------------------------------------------- */
tr[class="to-read"] span[class="status"] {
background-color: #ddd6fe; /* lighter purple base */
background-image: linear-gradient(to bottom, #c4b5fd, #8b5cf6); /* subtle vertical gradient */
border-radius: 8px;
padding: 8px 8px;
color: white;
box-shadow:
2px 2px 0 rgba(221, 214, 254, .9);
transition: box-shadow 0.3s ease;
border: 2px solid #64748B;
}
tr[class="read"] span[class="status"] {
border: 2px solid #64748B;
background-image: linear-gradient(to bottom, #fca5a5, #ef4444); /* soft blue gradient */
border-radius: 8px;
padding: 8px 8px;
color: #1a1a1a; /* dark text for contrast */
box-shadow: 2px 2px 0 rgba(244, 63, 94, .5);
transition: box-shadow 0.3s ease;
}
tr[class="in-progress"] span[class="status"] {
border: 2px solid #64748B;
background-image: linear-gradient(to top, #d9f99d, #a3e635); /* light teal to soft blue, reversed */
border-radius: 8px;
padding: 8px 8px;
color: #00363a; /* dark teal text for better contrast */
box-shadow: 2px 2px 0 rgba(217, 249, 157, .3);
transition: box-shadow 0.3s ease;
}
/* ------------------------------------------- */
/* Rate and status span size styling */
/* ------------------------------------------- */
span[class="status"],
span[class^="rate"] {
height: 24px;
width: auto;
padding: 8px 8px;
}
/* Styling for the rate dots inside rate spans */
span[class^="rate"] > span {
border: 1px solid #555;
border-radius: 50%;
margin: 0 4px;
height: 12px;
width: 12px;
background-color: #ccc;
display: inline-block;
}
/* ------------------------------------------- */
/* Rating highlighting based on score (1–3) */
/* ------------------------------------------- */
/* First child of span with class "one" */
span[class~="one"] > span:first-child {
background-image: linear-gradient(to bottom, #f6d365, #fda085); /* warm orange gradient */
}
/* First two children of span with class "two" */
span[class~="two"] > span:first-child,
span[class~="two"] > span:nth-child(2) {
background-image: linear-gradient(to bottom, #a1c4fd, #c2e9fb); /* soft blue gradient */
}
/* All children of span with class "three" */
span[class~="three"] > span {
background-image: linear-gradient(to bottom, #d4fc79, #96e6a1); /* minty green gradient */
}
Raw
styles
<link href="https://codepen.io/mhekel/pen/yyeeKra.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment