hlsv 1.0.0

data/public/styles_csv.css

@@ -0,0 +1,448 @@
+/*
+  Copyright (c) 2026 AdClin
+  Licensed under the GNU Affero General Public License v3.0 or later.
+  See the LICENSE file for details.
+*/
+
+/* styles_csv.css - Enhanced CSV view styling with branding */
+
+/* ===========================
+   BASE STYLES
+   =========================== */
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  min-height: 100vh;
+}
+
+/* ===========================
+   CSV HEADER WITH BRANDING
+   =========================== */
+.csv-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  padding: 25px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.csv-header h1 {
+  margin: 0;
+  padding: 0;
+  border: none;
+  color: #2c3e50;
+  font-size: 1.8em;
+}
+
+.company-branding {
+  display: flex;
+  align-items: center;
+}
+
+.company-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.company-link:hover {
+  opacity: 0.8;
+  transform: translateY(-2px);
+}
+
+.company-link:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+.company-logo {
+  height: 50px;
+  width: auto;
+  object-fit: contain;
+}
+
+.company-name {
+  font-size: 1.2em;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+/* ===========================
+   CSV FOOTER WITH COPYRIGHT AND LICENSE
+   =========================== */
+.csv-footer {
+  margin-top: 30px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 15px;
+  color: #6c757d;
+  font-size: 0.9em;
+  margin-bottom: 10px;
+}
+
+.footer-content .separator {
+  color: #dee2e6;
+  font-weight: bold;
+}
+
+.footer-content a {
+  color: #007bff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-content a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+.generated-date {
+  color: #6c757d;
+  font-size: 0.85em;
+  margin: 5px 0 0 0;
+}
+
+/* ===========================
+   INFO SECTION
+   =========================== */
+.info-section {
+  background: linear-gradient(135deg, #e8f4f8 0%, #d1ecf1 100%);
+  border-left: 4px solid #3498db;
+  padding: 20px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
+}
+
+.info-section p {
+  margin: 10px 0;
+  line-height: 1.6;
+  color: #2c3e50;
+}
+
+.info-section strong {
+  color: #2980b9;
+}
+
+/* ===========================
+   ACTIONS SECTION
+   =========================== */
+.actions {
+  margin-bottom: 20px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.btn-export {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.btn-export:hover {
+  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
+}
+
+.btn-export:active {
+  transform: translateY(0);
+}
+
+.btn-export:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+/* ===========================
+   TABLE CONTAINER
+   =========================== */
+.table-container {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: auto;
+  max-height: calc(100vh - 450px);
+}
+
+/* ===========================
+   TABLE STYLES
+   =========================== */
+table {
+  border-collapse: collapse;
+  width: max-content;
+  min-width: 100%;
+  font-size: 13px;
+}
+
+th, td {
+  border: 1px solid #dee2e6;
+  padding: 10px 12px;
+  white-space: nowrap;
+  text-align: left;
+}
+
+/* ===========================
+   TABLE HEADER
+   =========================== */
+thead th {
+  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+  color: #2c3e50;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+thead th:first-child {
+  border-top-left-radius: 8px;
+}
+
+thead th:last-child {
+  border-top-right-radius: 8px;
+}
+
+/* ===========================
+   TABLE BODY - ALTERNATING COLORS
+   =========================== */
+tbody tr {
+  transition: all 0.2s ease;
+}
+
+tbody tr:hover {
+  background-color: #f8f9fa !important;
+  transform: scale(1.01);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+tr.even-group {
+  background-color: #ffffff;
+}
+
+tr.odd-group {
+  background-color: #e3f2fd;
+}
+
+tbody td {
+  color: #495057;
+}
+
+/* First column (key number) styling */
+tbody td:first-child {
+  font-weight: 600;
+  color: #2c3e50;
+  background-color: rgba(52, 152, 219, 0.05);
+}
+
+/* ===========================
+   RESPONSIVE DESIGN
+   =========================== */
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+
+  .csv-header {
+    flex-direction: column;
+    gap: 15px;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .csv-header h1 {
+    font-size: 1.4em;
+  }
+
+  .company-logo {
+    height: 40px;
+  }
+
+  .company-name {
+    font-size: 1em;
+  }
+
+  .info-section {
+    padding: 15px;
+  }
+
+  table {
+    font-size: 11px;
+  }
+
+  th, td {
+    padding: 8px 10px;
+  }
+
+  .btn-export {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .table-container {
+    max-height: calc(100vh - 500px);
+  }
+
+  .footer-content {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .footer-content .separator {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .csv-header h1 {
+    font-size: 1.2em;
+  }
+
+  table {
+    font-size: 10px;
+  }
+
+  th, td {
+    padding: 6px 8px;
+  }
+
+  .company-logo {
+    height: 35px;
+  }
+}
+
+/* ===========================
+   PRINT STYLES
+   =========================== */
+@media print {
+  body {
+    background: white;
+    padding: 0;
+  }
+
+  .actions {
+    display: none;
+  }
+
+  .table-container {
+    max-height: none;
+    box-shadow: none;
+    overflow: visible;
+  }
+
+  thead th {
+    position: static;
+    box-shadow: none;
+  }
+
+  tbody tr:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .info-section {
+    page-break-inside: avoid;
+  }
+
+  .csv-header,
+  .csv-footer {
+    box-shadow: none;
+  }
+
+  .company-link {
+    pointer-events: none;
+  }
+
+  a {
+    color: #000;
+    text-decoration: underline;
+  }
+}
+
+/* ===========================
+   ACCESSIBILITY
+   =========================== */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* Focus visible for keyboard navigation */
+.table-container:focus,
+.btn-export:focus,
+.company-link:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  table {
+    border: 2px solid #000;
+  }
+
+  th, td {
+    border: 1px solid #000;
+  }
+
+  .btn-export {
+    border: 2px solid #000;
+  }
+
+  .csv-header,
+  .csv-footer {
+    border: 2px solid #000;
+  }
+}
+
+/* ===========================
+   LOADING STATE (if needed)
+   =========================== */
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+  color: #6c757d;
+}
+
+.loading::after {
+  content: "Loading...";
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}

data/views/csv_view.erb

@@ -0,0 +1,85 @@
+<!--
+  Copyright (c) 2026 AdClin
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as
+  published by the Free Software Foundation, either version 3 of the
+  License, or (at your option) any later version.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= @ds_name %>: Duplicate Analysis</title>
+  <link rel="stylesheet" href="/styles_csv.css">
+</head>
+<body>
+
+<!-- Header with title and logo -->
+<header class="csv-header">
+  <h1>Duplicates in <%= @ds_name %> for <%= @type %></h1>
+  <div class="company-branding">
+      <a href="https://adclin.com" target="_blank" rel="noopener noreferrer" class="company-link">
+        <img src="/Contact-LOGO.png" alt="AdClin Logo" class="company-logo">
+    </a>
+  </div>
+</header>
+
+<nav class="actions" role="navigation" aria-label="File actions">
+  <a class="btn-export"
+     href="/excel_export?file=<%= URI.encode_www_form_component(params[:file]) %>&last_valid_key=<%= URI.encode_www_form_component(@last_valid_key.join(',')) %>"
+     aria-label="Export to Excel">
+    ⬇️ Export to Excel
+  </a>
+</nav>
+
+<section class="info-section" role="region" aria-label="Information">
+  <p>This table displays the detected duplicates, grouped according to the last key tested. 
+     The duplicate groups are represented by a number in the "No" column. 
+     Alternating colors are used to distinguish them visually.</p>
+  <p><strong>Note:</strong> All variables present in the dataset are displayed to help you identify 
+     the variable(s) to add to the configuration to find a valid key.</p>
+  <% unless @last_valid_key.empty? %>
+    <p>Last key tested: <strong><%= @last_valid_key.join(', ') %></strong></p>
+  <% end %>
+</section>
+
+<div class="table-container" role="region" aria-label="Duplicates table" tabindex="0">
+  <table role="table">
+    <thead>
+      <tr role="row">
+        <% @rows.headers.each do |header| %>
+          <th role="columnheader" scope="col"><%= header %></th>
+        <% end %>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% @rows.each do |row| %>
+        <% key = row[0].to_i %>
+        <% css_class = key.even? ? "even-group" : "odd-group" %>
+
+        <tr class="<%= css_class %>" role="row">
+          <% row.each do |_, value| %>
+            <td role="cell"><%= value %></td>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<!-- Footer with copyright and license on same line -->
+<footer class="csv-footer">
+  <div class="footer-content">
+      <span class="copyright">© 1999-2026 AdClin. All rights reserved.</span>
+    <span class="separator">•</span>
+    <span class="license">Licensed under <a href="/LICENSE" target="_blank" rel="noopener noreferrer">AGPL v3</a></span>
+  </div>
+  <p class="generated-date">Generated on <%= Time.now.strftime('%Y-%m-%d at %H:%M') %></p>
+</footer>
+
+</body>
+</html>