Add JavaScript functionality for dynamic UI updates and filtering

- Implemented font color configuration based on numeric values in various sections.
- Added resizing functionality for input fields to accommodate text length.
- Initialized filters on document ready for improved user interaction.
- Created visualization for profile data using fetched dot format.
- Enhanced SQL detail page with click event handling for row navigation.
- Ensured consistent highlighting for code blocks across multiple pages.

staticfiles/silk/css/components/cell.css

@@ -0,0 +1,32 @@
+.cell {
+  display: inline-block;
+  background-color: transparent;
+  padding: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+  border-radius: 4px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.cell div {
+  margin: 2px;
+}
+.cell .timestamp-div {
+  margin-bottom: 15px;
+  font-size: 13px;
+}
+.cell .meta {
+  font-size: 12px;
+  color: #be5b43;
+}
+.cell .meta .unit {
+  font-size: 9px;
+  font-weight: lighter !important;
+}
+.cell .method-div {
+  font-weight: bold;
+  font-size: 20px;
+}
+.cell .path-div {
+  font-size: 18px;
+  margin-bottom: 15px;
+}

staticfiles/silk/css/components/colors.css

@@ -0,0 +1,19 @@
+.very-good-font-color {
+  color: #bac54b;
+}
+
+.good-font-color {
+  color: #c3a948;
+}
+
+.ok-font-color {
+  color: #c08245;
+}
+
+.bad-font-color {
+  color: #be5b43;
+}
+
+.very-bad-font-color {
+  color: #b9424f;
+}

staticfiles/silk/css/components/fonts.css

@@ -0,0 +1,72 @@
+/**
+*   Fira Sans
+*/
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-Regular.woff);
+  font-weight: normal;
+}
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-Medium.woff);
+  font-weight: bold;
+}
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-Bold.woff);
+  font-weight: bolder;
+}
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-Light.woff);
+  font-weight: lighter;
+}
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-RegularItalic.woff);
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-MediumItalic.woff);
+  font-weight: bold;
+  font-style: italic;
+}
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-BoldItalic.woff);
+  font-weight: bolder;
+  font-style: italic;
+}
+@font-face {
+  font-family: FiraSans;
+  src: url(../../fonts/fira/FiraSans-LightItalic.woff);
+  font-weight: lighter;
+  font-style: italic;
+}
+/**
+*   Fantasque
+*/
+@font-face {
+  font-family: Fantasque;
+  src: url(../../fonts/fantasque/FantasqueSansMono-Regular.woff);
+  font-weight: normal;
+}
+@font-face {
+  font-family: Fantasque;
+  src: url(../../fonts/fantasque/FantasqueSansMono-Bold.woff);
+  font-weight: bold;
+}
+@font-face {
+  font-family: Fantasque;
+  src: url(../../fonts/fantasque/FantasqueSansMono-RegItalic.woff);
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: Fantasque;
+  src: url(../../fonts/fantasque/FantasqueSansMono-BoldItalic.woff);
+  font-weight: bold;
+  font-style: italic;
+}

staticfiles/silk/css/components/heading.css

@@ -0,0 +1,14 @@
+.heading {
+  width: 100%;
+  background-color: transparent;
+  height: 30px;
+  display: table;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.heading .inner-heading {
+  display: table-cell;
+  text-align: left;
+  padding: 0;
+  vertical-align: middle;
+}

staticfiles/silk/css/components/numeric.css

@@ -0,0 +1,15 @@
+.numeric {
+  font-weight: normal;
+}
+
+.unit {
+  font-weight: normal;
+}
+
+.numeric .unit {
+  font-size: 12px;
+}
+
+.numeric {
+  font-size: 20px;
+}

staticfiles/silk/css/components/row.css

@@ -0,0 +1,56 @@
+.row-wrapper {
+  display: table;
+  margin: 2rem;
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill-available;
+}
+.row-wrapper .row {
+  display: table-row;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.row-wrapper .row div {
+  padding: 1rem;
+}
+.row-wrapper .row .col {
+  font-size: 20px;
+  display: table-cell;
+}
+.row-wrapper .row .timestamp-div {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  margin-bottom: 15px;
+  font-size: 13px;
+}
+.row-wrapper .row .meta {
+  font-size: 12px;
+  color: #be5b43;
+}
+.row-wrapper .row .meta .unit {
+  font-size: 9px;
+  font-weight: lighter !important;
+}
+.row-wrapper .row .method-div {
+  font-weight: bold;
+  font-size: 20px;
+}
+.row-wrapper .row .path-div {
+  font-size: 18px;
+  margin-bottom: 15px;
+}
+.row-wrapper .row .num-queries-div {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.row-wrapper .row .spacing .numeric {
+  padding: 0 0.3rem;
+}
+.row-wrapper .row .spacing .meta {
+  padding: 0 0.3rem;
+}
+.row-wrapper .row:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}

staticfiles/silk/css/components/summary.css

@@ -0,0 +1,23 @@
+#error-div {
+  margin: 10px;
+}
+
+#query-div {
+  margin: auto;
+  width: 960px;
+  text-align: center;
+}
+
+#code {
+  text-align: left;
+}
+
+.name-div {
+  margin-top: 20px;
+  margin-bottom: 15px;
+  font-weight: bold;
+}
+
+.description {
+  text-align: left;
+}