M assets/css/app.css → assets/css/app.css

@@ -22,6 +22,7 @@ --gradient-gray: linear-gradient(135deg, rgba(149, 165, 166, 0.1) 0%, rgba(149, 165, 166, 0.05) 100%);
   --gradient-header: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
   --scrollbar-track: rgba(255, 255, 255, 0.05);
   --scrollbar-thumb: rgba(231, 76, 60, 0.3);
+  --text-glow: 0 0 10px rgba(231, 76, 60, 0.5);
 }
 
 :root[data-theme="light"] {
@@ -47,6 +48,7 @@ --gradient-gray: linear-gradient(135deg, rgba(108, 117, 125, 0.1) 0%, rgba(108, 117, 125, 0.05) 100%);
   --gradient-header: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
   --scrollbar-track: rgba(0, 0, 0, 0.05);
   --scrollbar-thumb: rgba(220, 53, 69, 0.3);
+  --text-glow: 0 0 10px rgba(220, 53, 69, 0.5);
 }
 
 * {
@@ -448,11 +450,337 @@ font-weight: 600;
   color: var(--text-primary);
 }
 
-.tracker-jackett__cell--description {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* Yes/No value styling */
+.tracker-table__cell--yes {
+  position: relative;
+}
+
+.tracker-table__cell--yes::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  background-color: rgba(46, 204, 113, 0.1);
+  color: #2ecc71;
+  border: 1px solid #2ecc71;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--no {
+  position: relative;
+}
+
+.tracker-table__cell--no::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  background-color: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
+  border: 1px solid #e74c3c;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+/* Difficulty level styling */
+.tracker-table__cell--easy {
+  position: relative;
+}
+
+.tracker-table__cell--easy::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  background-color: rgba(46, 204, 113, 0.1);
+  color: #2ecc71;
+  border: 1px solid #2ecc71;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 50px;
+}
+
+.tracker-table__cell--moderate {
+  position: relative;
+}
+
+.tracker-table__cell--moderate::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #ffc107;
+  border: 1px solid #ffc107;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 50px;
+}
+
+.tracker-table__cell--tough {
+  position: relative;
+}
+
+.tracker-table__cell--tough::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  background-color: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
+  border: 1px solid #e74c3c;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 50px;
+}
+
+/* Mozilla Observatory Grade styling */
+.tracker-table__cell--grade-a-plus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-a-plus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #22c55e;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-a {
+  position: relative;
+}
+
+.tracker-table__cell--grade-a::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #2ecc71;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-a-minus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-a-minus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #65a30d;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-b-plus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-b-plus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #84cc16;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-b {
+  position: relative;
+}
+
+.tracker-table__cell--grade-b::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #a3e635;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-b-minus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-b-minus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #ffc107;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-c-plus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-c-plus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #fb923c;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-c {
+  position: relative;
+}
+
+.tracker-table__cell--grade-c::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #f97316;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-c-minus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-c-minus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #ea580c;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-d-plus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-d-plus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #ef4444;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-d {
+  position: relative;
+}
+
+.tracker-table__cell--grade-d::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #dc2626;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-d-minus {
+  position: relative;
+}
+
+.tracker-table__cell--grade-d-minus::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #b91c1c;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+.tracker-table__cell--grade-f {
+  position: relative;
+}
+
+.tracker-table__cell--grade-f::after {
+  content: attr(data-value);
+  display: inline-block;
+  padding: 1px;
+  color: #991b1b;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-align: center;
+  min-width: 40px;
+}
+
+/* Light theme adjustments for yes/no values */
+:root[data-theme="light"] .tracker-table__cell--yes::after {
+  background-color: rgba(39, 174, 96, 0.08);
+  color: #27ae60;
+  border-color: #27ae60;
+}
+
+:root[data-theme="light"] .tracker-table__cell--no::after {
+  background-color: rgba(220, 53, 69, 0.08);
+  color: #dc3545;
+  border-color: #dc3545;
+}
+
+/* Light theme adjustments for difficulty levels */
+:root[data-theme="light"] .tracker-table__cell--easy::after {
+  background-color: rgba(39, 174, 96, 0.08);
+  color: #27ae60;
+  border-color: #27ae60;
+}
+
+:root[data-theme="light"] .tracker-table__cell--moderate::after {
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #e6ac00;
+  border-color: #e6ac00;
+}
+
+:root[data-theme="light"] .tracker-table__cell--tough::after {
+  background-color: rgba(220, 53, 69, 0.08);
+  color: #dc3545;
+  border-color: #dc3545;
 }
 
 /* Jackett Section */

M index.html → index.html

@@ -232,34 +232,19 @@ @mouseleave="hideTooltip()"
                             class="tracker-table__sortable">
                             Points <span class="icon icon-sort"></span>
                         </th>
-                        <th @click="sortBy('Hit & Run')"
-                            @mouseenter="showTooltip($event, 'Whether the tracker enforces hit and run rules (must seed for minimum time/ratio)')"
-                            @mouseleave="hideTooltip()"
-                            class="tracker-table__sortable">
+                        <th @click="sortBy('Hit & Run')" class="tracker-table__sortable">
                             H&R <span class="icon icon-sort"></span>
                         </th>
-                        <th @click="sortBy('Birthdate')"
-                            @mouseenter="showTooltip($event, 'Year the tracker was founded or launched')"
-                            @mouseleave="hideTooltip()"
-                            class="tracker-table__sortable">
+                        <th @click="sortBy('Birthdate')" class="tracker-table__sortable">
                             B-Day <span class="icon icon-sort"></span>
                         </th>
-                        <th @click="sortBy('Join')"
-                            @mouseenter="showTooltip($event, 'How users can join the tracker (Invite, Application, Open, etc.)')"
-                            @mouseleave="hideTooltip()"
-                            class="tracker-table__sortable">
+                        <th @click="sortBy('Join')" class="tracker-table__sortable">
                             Join <span class="icon icon-sort"></span>
                         </th>
-                        <th @click="sortBy('Join Diff')"
-                            @mouseenter="showTooltip($event, 'How difficult it is to join the tracker (Easy, Moderate, Tough)')"
-                            @mouseleave="hideTooltip()"
-                            class="tracker-table__sortable">
+                        <th @click="sortBy('Join Diff')" class="tracker-table__sortable">
                             Join Diff <span class="icon icon-sort"></span>
                         </th>
-                        <th @click="sortBy('Updated')"
-                            @mouseenter="showTooltip($event, 'Date when the tracker\'s information was last updated in this database')"
-                            @mouseleave="hideTooltip()"
-                            class="tracker-table__sortable">
+                        <th @click="sortBy('Updated')" class="tracker-table__sortable">
                             Updated <span class="icon icon-sort"></span>
                         </th>
                     </tr>
@@ -271,18 +256,65 @@ <td class="tracker-table__cell tracker-table__cell--name" x-text="tracker.Name"></td>
                             <td class="tracker-table__cell" x-text="tracker.Abbreviation"></td>
                             <td class="tracker-table__cell" x-text="tracker.Type"></td>
                             <td class="tracker-table__cell" x-text="tracker.Codebase"></td>
-                            <td class="tracker-table__cell" x-text="tracker['Observatory Grade']"></td>
+                            <td class="tracker-table__cell"
+                                :class="tracker['Observatory Grade'] === 'A+' || tracker['Observatory Grade'] === 'A +' ? 'tracker-table__cell--grade-a-plus' :
+                                        tracker['Observatory Grade'] === 'A' ? 'tracker-table__cell--grade-a' :
+                                        tracker['Observatory Grade'] === 'A-' || tracker['Observatory Grade'] === 'A -' ? 'tracker-table__cell--grade-a-minus' :
+                                        tracker['Observatory Grade'] === 'B+' || tracker['Observatory Grade'] === 'B +' ? 'tracker-table__cell--grade-b-plus' :
+                                        tracker['Observatory Grade'] === 'B' ? 'tracker-table__cell--grade-b' :
+                                        tracker['Observatory Grade'] === 'B-' || tracker['Observatory Grade'] === 'B -' ? 'tracker-table__cell--grade-b-minus' :
+                                        tracker['Observatory Grade'] === 'C+' || tracker['Observatory Grade'] === 'C +' ? 'tracker-table__cell--grade-c-plus' :
+                                        tracker['Observatory Grade'] === 'C' ? 'tracker-table__cell--grade-c' :
+                                        tracker['Observatory Grade'] === 'C-' || tracker['Observatory Grade'] === 'C -' ? 'tracker-table__cell--grade-c-minus' :
+                                        tracker['Observatory Grade'] === 'D+' || tracker['Observatory Grade'] === 'D +' ? 'tracker-table__cell--grade-d-plus' :
+                                        tracker['Observatory Grade'] === 'D' ? 'tracker-table__cell--grade-d' :
+                                        tracker['Observatory Grade'] === 'D-' || tracker['Observatory Grade'] === 'D -' ? 'tracker-table__cell--grade-d-minus' :
+                                        tracker['Observatory Grade'] === 'F' ? 'tracker-table__cell--grade-f' : ''"
+                                :data-value="tracker['Observatory Grade']"
+                                :style="(tracker['Observatory Grade'] && tracker['Observatory Grade'] !== '-' && tracker['Observatory Grade'].trim() !== '') ? 'color: transparent;' : ''">
+                                <span x-show="!tracker['Observatory Grade'] || tracker['Observatory Grade'] === '-' || tracker['Observatory Grade'].trim() === ''" x-text="tracker['Observatory Grade']"></span>
+                            </td>
                             <td class="tracker-table__cell" x-text="tracker.Users"></td>
                             <td class="tracker-table__cell" x-text="tracker.Torrents"></td>
                             <td class="tracker-table__cell" x-text="tracker.Peers"></td>
-                            <td class="tracker-table__cell" x-text="tracker.Ratio"></td>
-                            <td class="tracker-table__cell" x-text="tracker['Ratio Diff']"></td>
-                            <td class="tracker-table__cell" x-text="tracker.Freeleech"></td>
-                            <td class="tracker-table__cell" x-text="tracker.Points"></td>
-                            <td class="tracker-table__cell" x-text="tracker['Hit & Run']"></td>
+                            <td class="tracker-table__cell"
+                                :class="tracker.Ratio === 'Yes' ? 'tracker-table__cell--yes' : tracker.Ratio === 'No' ? 'tracker-table__cell--no' : ''"
+                                :data-value="tracker.Ratio"
+                                :style="(tracker.Ratio === 'Yes' || tracker.Ratio === 'No') ? 'color: transparent;' : ''">
+                                <span x-show="tracker.Ratio !== 'Yes' && tracker.Ratio !== 'No'" x-text="tracker.Ratio"></span>
+                            </td>
+                            <td class="tracker-table__cell"
+                                :class="tracker['Ratio Diff'] === 'Easy' ? 'tracker-table__cell--easy' : tracker['Ratio Diff'] === 'Moderate' ? 'tracker-table__cell--moderate' : tracker['Ratio Diff'] === 'Tough' ? 'tracker-table__cell--tough' : ''"
+                                :data-value="tracker['Ratio Diff']"
+                                :style="(tracker['Ratio Diff'] === 'Easy' || tracker['Ratio Diff'] === 'Moderate' || tracker['Ratio Diff'] === 'Tough') ? 'color: transparent;' : ''">
+                                <span x-show="tracker['Ratio Diff'] !== 'Easy' && tracker['Ratio Diff'] !== 'Moderate' && tracker['Ratio Diff'] !== 'Tough'" x-text="tracker['Ratio Diff']"></span>
+                            </td>
+                            <td class="tracker-table__cell"
+                                :class="tracker.Freeleech === 'Yes' ? 'tracker-table__cell--yes' : tracker.Freeleech === 'No' ? 'tracker-table__cell--no' : ''"
+                                :data-value="tracker.Freeleech"
+                                :style="(tracker.Freeleech === 'Yes' || tracker.Freeleech === 'No') ? 'color: transparent;' : ''">
+                                <span x-show="tracker.Freeleech !== 'Yes' && tracker.Freeleech !== 'No'" x-text="tracker.Freeleech"></span>
+                            </td>
+                            <td class="tracker-table__cell"
+                                :class="tracker.Points === 'Yes' ? 'tracker-table__cell--yes' : tracker.Points === 'No' ? 'tracker-table__cell--no' : ''"
+                                :data-value="tracker.Points"
+                                :style="(tracker.Points === 'Yes' || tracker.Points === 'No') ? 'color: transparent;' : ''">
+                                <span x-show="tracker.Points !== 'Yes' && tracker.Points !== 'No'" x-text="tracker.Points"></span>
+                            </td>
+                            <td class="tracker-table__cell"
+                                :class="tracker['Hit & Run'] === 'Yes' ? 'tracker-table__cell--yes' : tracker['Hit & Run'] === 'No' ? 'tracker-table__cell--no' : ''"
+                                :data-value="tracker['Hit & Run']"
+                                :style="(tracker['Hit & Run'] === 'Yes' || tracker['Hit & Run'] === 'No') ? 'color: transparent;' : ''">
+                                <span x-show="tracker['Hit & Run'] !== 'Yes' && tracker['Hit & Run'] !== 'No'" x-text="tracker['Hit & Run']"></span>
+                            </td>
                             <td class="tracker-table__cell" x-text="tracker.Birthdate"></td>
                             <td class="tracker-table__cell" x-text="tracker.Join"></td>
-                            <td class="tracker-table__cell" x-text="tracker['Join Diff']"></td>
+                            <td class="tracker-table__cell"
+                                :class="tracker['Join Diff'] === 'Easy' ? 'tracker-table__cell--easy' : tracker['Join Diff'] === 'Moderate' ? 'tracker-table__cell--moderate' : tracker['Join Diff'] === 'Tough' ? 'tracker-table__cell--tough' : ''"
+                                :data-value="tracker['Join Diff']"
+                                :style="(tracker['Join Diff'] === 'Easy' || tracker['Join Diff'] === 'Moderate' || tracker['Join Diff'] === 'Tough') ? 'color: transparent;' : ''">
+                                <span x-show="tracker['Join Diff'] !== 'Easy' && tracker['Join Diff'] !== 'Moderate' && tracker['Join Diff'] !== 'Tough'" x-text="tracker['Join Diff']"></span>
+                            </td>
                             <td class="tracker-table__cell" x-text="tracker.Updated"></td>
                         </tr>
                     </template>