Spaces:

ricspse
/

dataviz-liquid-glass-studio

Running

App Files Files Community

ricspse commited on Oct 24, 2025

Commit

0444185

verified ·

1 Parent(s): 8ad45f9

um criador de graficos a partir de csv no estilo liquid glass interativo e com animacoes

Browse files

Files changed (8) hide show

README.md +8 -5
about.html +44 -0
components/footer.js +62 -0
components/navbar.js +86 -0
gallery.html +70 -0
index.html +102 -19
script.js +322 -0
style.css +48 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Dataviz Liquid Glass Studio
-emoji: 📈
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DataViz Liquid Glass Studio 📊
+colorFrom: yellow
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

about.html ADDED Viewed

	@@ -0,0 +1,44 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - DataViz Liquid Glass Studio</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <section class="text-center mb-12">
+            <h1 class="text-5xl md:text-7xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent mb-6">
+                About Liquid Glass
+            </h1>
+            <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
+                Discover the magic behind our revolutionary data visualization technology
+            </p>
+        </section>
+        <div class="glass-card p-8 max-w-4xl mx-auto">
+            <div class="grid md:grid-cols-2 gap-8 items-center">
+                <div>
+                    <h2 class="text-3xl font-bold text-white mb-4">The Future of Data Visualization</h2>
+            <p class="text-gray-300 mb-6 leading-relaxed">
+                    Liquid Glass DataViz Studio combines cutting-edge web technologies with stunning visual design
+                    to transform your CSV data into interactive, beautiful visualizations. Our unique liquid glass
+                    interface provides a seamless and immersive experience for data exploration.
+                </p>
+                <div class="space-y-4">
+                    <div class="flex items-center gap-3">
+                        <i data-feather="zap" class="text-cyan-400"></i>
+                        <span class="text-white">Real-time Data Processing</span>
+                    </div>
+                    <div class="flex items-center gap-3">
+                        <i data-feather="eye" class="text-purple-{"ok":false,"message":"Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model."}
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,62 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: rgba(15, 23, 42, 0.8);
+          backdrop-filter: blur(20px);
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          color: white;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .footer-content {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          align-items: center;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+        }
+        .social-links a {
+          color: white;
+          padding: 0.5rem;
+          border-radius: 8px;
+          transition: all 0.3s ease;
+        }
+        .social-links a:hover {
+          background: rgba(0, 255, 255, 0.1);
+          transform: translateY(-2px);
+        }
+        .made-with {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.875rem;
+          opacity: 0.8;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="social-links">
+            <a href="#" aria-label="GitHub"><i data-feather="github"></i></a>
+          <a href="#" aria-label="Twitter"><i data-feather="twitter"></i></a>
+          <a href="#" aria-label="LinkedIn"><i data-feather="linkedin"></i></a>
+            <a href="#" aria-label="Instagram"><i data-feather="instagram"></i></a>
+          </div>
+          <p class="made-with">
+            <span>Made with</span>
+            <i data-feather="heart" class="text-red-400"></i>
+            <span>using Liquid Glass technology</span>
+          </p>
+          <p>&copy; 2024 DataViz Liquid Glass Studio. All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,86 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(15, 23, 42, 0.8);
+          backdrop-filter: blur(20px);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          z-index: 50;
+        }
+        .logo {
+          background: linear-gradient(135deg, #00ffff, #a855f7);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-weight: 700;
+          font-size: 1.5rem;
+        }
+        ul {
+          display: flex;
+          gap: 2rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          align-items: center;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+          padding: 0.5rem 1rem;
+          border-radius: 12px;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+        }
+        a::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
+          transition: left 0.5s;
+        }
+        a:hover::before {
+          left: 100%;
+        }
+        a:hover {
+          background: rgba(0, 255, 255, 0.1);
+          transform: translateY(-2px);
+        }
+        .nav-icon {
+          width: 20px;
+          height: 20px;
+        }
+        @media (max-width: 768px) {
+          nav {
+            padding: 1rem;
+          }
+          ul {
+            gap: 1rem;
+          }
+          a {
+            padding: 0.5rem;
+            font-size: 0.875rem;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">LiquidGlassViz</div>
+        <ul>
+          <li><a href="/" class="flex items-center gap-2"><i data-feather="home" class="nav-icon"></i> Home</a></li>
+          <li><a href="/gallery.html" class="flex items-center gap-2"><i data-feather="image"></i> Gallery</a></li>
+          <li><a href="/about.html" class="flex items-center gap-2"><i data-feather="info"></i> About</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

gallery.html ADDED Viewed

	@@ -0,0 +1,70 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visualization Gallery - DataViz Liquid Glass Studio</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <section class="text-center mb-12">
+            <h1 class="text-5xl md:text-7xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent mb-6">
+                Visualization Gallery
+            </h1>
+            <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
+                Explore stunning data visualizations created with our liquid glass technology
+            </p>
+        </section>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Sample visualizations -->
+            <div class="glass-card p-6 hover-lift">
+                <div class="w-full h-48 bg-gradient-to-br from-cyan-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
+                <i data-feather="bar-chart-2" class="w-16 h-16 text-cyan-400"></i>
+            </div>
+            <div class="glass-card p-6 hover-lift">
+                <div class="w-full h-48 bg-gradient-to-br from-purple-500/20 to-cyan-500/20 rounded-xl mb-4 flex items-center justify-center">
+                <i data-feather="trending-up" class="w-16 h-16 text-purple-400"></i>
+            </div>
+            <div class="glass-card p-6 hover-lift">
+                <div class="w-full h-48 bg-gradient-to-br from-cyan-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
+                <i data-feather="pie-chart" class="w-16 h-16 text-cyan-400"></i>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <div id="vantaBackground" class="fixed top-0 left-0 w-full h-full -z-10"></div>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        VANTA.GLOBE({
+            el: "#vantaBackground",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x00ffff,
+            backgroundColor: 0x0f172a,
+            size: 1.00
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,102 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DataViz Liquid Glass Studio</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center mb-12">
+            <h1 class="text-5xl md:text-7xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent mb-6">
+                Liquid Glass DataViz
+            </h1>
+            <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
+                Transform your CSV data into stunning interactive visualizations with our liquid glass interface
+            </p>
+        </section>
+        <!-- Upload Section -->
+        <section class="glass-card p-8 mb-12">
+            <div class="text-center mb-8">
+                <i data-feather="upload-cloud" class="w-16 h-16 text-cyan-400 mx-auto mb-4"></i>
+                <h2 class="text-3xl font-bold text-white mb-4">Upload Your CSV</h2>
+                <p class="text-gray-300">Drag and drop your CSV file or click to browse</p>
+            </div>
+            <div class="border-2 border-dashed border-cyan-400/30 rounded-2xl p-12 text-center transition-all duration-300 hover:border-cyan-400/60 hover:bg-cyan-400/5" id="dropZone">
+                <input type="file" id="csvFile" accept=".csv" class="hidden">
+                <div class="space-y-4">
+                    <i data-feather="file-text" class="w-12 h-12 text-cyan-400 mx-auto"></i>
+                    <p class="text-gray-300">Drop your CSV file here or <span class="text-cyan-400 cursor-pointer" onclick="document.getElementById('csvFile').click()">browse files</span></p>
+                    <p class="text-sm text-gray-500">Supports files up to 10MB</p>
+                </div>
+            </div>
+        </section>
+        <!-- Preview Section -->
+        <section class="glass-card p-8 mb-12 hidden" id="previewSection">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-3xl font-bold text-white">Data Preview</h2>
+                <button id="generateViz" class="bg-gradient-to-r from-cyan-500 to-purple-500 text-white px-8 py-3 rounded-full font-semibold hover:shadow-2xl hover:shadow-cyan-500/25 transition-all duration-300">
+                    Generate Visualizations
+                </button>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full text-white" id="dataTable">
+                    <thead class="bg-cyan-500/20">
+                        <tr id="tableHeaders"></tr>
+                    </thead>
+                    <tbody id="tableBody" class="divide-y divide-gray-700"></tbody>
+                </table>
+            </div>
+        </section>
+        <!-- Visualization Gallery -->
+        <section class="glass-card p-8 hidden" id="vizGallery">
+            <h2 class="text-3xl font-bold text-white mb-8 text-center">Your Visualizations</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8" id="chartContainer">
+                <!-- Charts will be dynamically inserted here -->
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Background Animation -->
+    <div id="vantaBackground" class="fixed top-0 left-0 w-full h-full -z-10"></div>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vantaBackground",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x00ffff,
+            backgroundColor: 0x0f172a,
+            size: 1.00
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,322 @@

+// Shared JavaScript across all pages
+let csvData = [];
+let headers = [];
+// DOM Elements
+const dropZone = document.getElementById('dropZone');
+const csvFileInput = document.getElementById('csvFile');
+const previewSection = document.getElementById('previewSection');
+const tableHeaders = document.getElementById('tableHeaders');
+const tableBody = document.getElementById('tableBody');
+const generateVizBtn = document.getElementById('generateViz');
+const vizGallery = document.getElementById('vizGallery');
+const chartContainer = document.getElementById('chartContainer');
+// Initialize app
+document.addEventListener('DOMContentLoaded', function() {
+    initializeEventListeners();
+});
+function initializeEventListeners() {
+    // File input change
+    csvFileInput.addEventListener('change', handleFileSelect);
+    // Drag and drop events
+    dropZone.addEventListener('dragover', handleDragOver);
+    dropZone.addEventListener('dragleave', handleDragLeave);
+    dropZone.addEventListener('drop', handleDrop);
+    // Generate visualizations
+    generateVizBtn.addEventListener('click', generateVisualizations);
+}
+function handleDragOver(e) {
+    e.preventDefault();
+    dropZone.classList.add('drop-zone-active');
+}
+function handleDragLeave(e) {
+    e.preventDefault();
+    dropZone.classList.remove('drop-zone-active');
+}
+function handleDrop(e) {
+    e.preventDefault();
+    dropZone.classList.remove('drop-zone-active');
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+        processCSVFile(files[0]);
+    }
+}
+function handleFileSelect(e) {
+    const file = e.target.files[0];
+    if (file) {
+        processCSVFile(file);
+    }
+}
+function processCSVFile(file) {
+    if (file.type !== 'text/csv' && !file.name.endsWith('.csv')) {
+        alert('Please upload a valid CSV file.');
+        return;
+    }
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        const csvText = e.target.result;
+        parseCSV(csvText);
+    };
+    reader.readAsText(file);
+}
+function parseCSV(csvText) {
+    const lines = csvText.split('\n').filter(line => line.trim() !== '');
+    if (lines.length === 0) return;
+    // Extract headers
+    headers = lines[0].split(',').map(header => header.trim());
+    // Extract data rows
+    csvData = lines.slice(1).map(line => {
+        const values = line.split(',').map(value => value.trim());
+        return values;
+    });
+    displayPreview();
+}
+function displayPreview() {
+    // Show preview section
+    previewSection.classList.remove('hidden');
+    // Populate headers
+    tableHeaders.innerHTML = headers.map(header =>
+        `<th class="px-6 py-4 text-left font-semibold">${header}</th>`
+    ).join('');
+    // Populate data (show first 10 rows for preview)
+    const previewData = csvData.slice(0, 10);
+    tableBody.innerHTML = previewData.map(row =>
+        `<tr class="hover:bg-cyan-500/10">${row.map(cell =>
+            `<td class="px-6 py-4 border-b border-gray-700">${cell}</td>`
+        ).join('')}</tr>`
+    ).join('');
+    // Scroll to preview
+    previewSection.scrollIntoView({ behavior: 'smooth' });
+}
+function generateVisualizations() {
+    if (csvData.length === 0) return;
+    // Show visualization gallery
+    vizGallery.classList.remove('hidden');
+    chartContainer.innerHTML = '';
+    // Generate different chart types
+    generateBarChart();
+    generateLineChart();
+    generatePieChart();
+    generateScatterPlot();
+    // Scroll to gallery
+    vizGallery.scrollIntoView({ behavior: 'smooth' });
+}
+function generateBarChart() {
+    const canvas = document.createElement('canvas');
+    canvas.className = 'glass-card p-4';
+    chartContainer.appendChild(canvas);
+    // Sample data for demonstration
+    const ctx = canvas.getContext('2d');
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: headers.slice(0, 5),
+            datasets: [{
+                label: 'Sample Data',
+                data: [65, 59, 80, 81, 56],
+                backgroundColor: [
+                    'rgba(0, 255, 255, 0.7)',
+                    'rgba(168, 85, 247, 0.7)',
+                    'rgba(34, 211, 238, 0.7)',
+                    'rgba(139, 92, 246, 0.7)',
+                    'rgba(45, 212, 191, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(0, 255, 255, 1)',
+                    'rgba(168, 85, 247, 1)',
+                    'rgba(34, 211, 238, 1)',
+                    'rgba(139, 92, 246, 1)',
+                    'rgba(45, 212, 191, 1)'
+                ],
+                borderWidth: 2
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Bar Chart Visualization',
+                    color: 'white',
+                    font: { size: 16 }
+            },
+            legend: {
+                labels: { color: 'white' }
+            }
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                ticks: { color: 'white' }
+            },
+            x: {
+                ticks: { color: 'white' }
+            }
+        }
+    });
+}
+function generateLineChart() {
+    const canvas = document.createElement('canvas');
+    canvas.className = 'glass-card p-4';
+    chartContainer.appendChild(canvas);
+    const ctx = canvas.getContext('2d');
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+            datasets: [{
+                label: 'Trend Line',
+                data: [12, 19, 3, 5, 2],
+                borderColor: 'rgba(0, 255, 255, 1)',
+                backgroundColor: 'rgba(0, 255, 255, 0.1)',
+                borderWidth: 3,
+                tension: 0.4,
+                fill: true
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Line Chart Trend',
+                    color: 'white',
+                    font: { size: 16 }
+            },
+            legend: {
+                labels: { color: 'white' }
+            }
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                ticks: { color: 'white' }
+            },
+            x: {
+                ticks: { color: 'white' }
+            }
+        }
+    });
+}
+function generatePieChart() {
+    const canvas = document.createElement('canvas');
+    canvas.className = 'glass-card p-4';
+    chartContainer.appendChild(canvas);
+    const ctx = canvas.getContext('2d');
+    new Chart(ctx, {
+        type: 'pie',
+        data: {
+            labels: ['Category A', 'Category B', 'Category C', 'Category D'],
+            datasets: [{
+                data: [30, 25, 20, 25],
+                backgroundColor: [
+                    'rgba(0, 255, 255, 0.8)',
+                    'rgba(168, 85, 247, 0.8)',
+                    'rgba(34, 211, 238, 0.8)',
+                    'rgba(139, 92, 246, 0.8)'
+                ],
+                borderColor: 'rgba(255, 255, 255, 0.3)',
+                borderWidth: 2
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Pie Chart Distribution',
+                    color: 'white',
+                    font: { size: 16 }
+            },
+            legend: {
+                labels: { color: 'white' }
+            }
+        }
+    });
+}
+function generateScatterPlot() {
+    const canvas = document.createElement('canvas');
+    canvas.className = 'glass-card p-4';
+    chartContainer.appendChild(canvas);
+    const ctx = canvas.getContext('2d');
+    new Chart(ctx, {
+        type: 'scatter',
+        data: {
+            datasets: [{
+                label: 'Data Points',
+                data: [
+                    { x: 10, y: 20 }, { x: 15, y: 25 }, { x: 20, y: 30 },
+                    { x: 25, y: 35 }, { x: 30, y: 40 }, { x: 35, y: 45 }
+                ],
+                backgroundColor: 'rgba(168, 85, 247, 0.7)',
+                borderColor: 'rgba(168, 85, 247, 1)',
+                borderWidth: 2,
+                pointRadius: 6
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Scatter Plot Correlation',
+                    color: 'white',
+                    font: { size: 16 }
+            },
+            legend: {
+                labels: { color: 'white' }
+            }
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                ticks: { color: 'white' }
+            },
+            x: {
+                ticks: { color: 'white' }
+            }
+        }
+    });
+}
+// Utility function to download visualization
+function downloadChart(chartId, filename) {
+    const canvas = document.getElementById(chartId);
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = canvas.toDataURL();
+    link.click();
+}
+console.log('DataViz Liquid Glass Studio loaded successfully!');

style.css CHANGED Viewed

@@ -1,28 +1,58 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+    overflow-x: hidden;
+}
+/* Glass morphism effect */
+.glass-card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 24px;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #00ffff, #a855f7);
+    border-radius: 4px;
 }
+/* Smooth transitions */
+* {
+    transition: all 0.3s ease;
 }
+/* Hover effects */
+.hover-lift:hover {
+    transform: translateY(-4px);
 }
+/* Loading animation */
+@keyframes pulse-glow {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+.pulse-glow {
+    animation: pulse-glow 2s infinite;
+}
+/* File drop zone active state */
+.drop-zone-active {
+    border-color: #00ffff !important;
+    background: rgba(0, 255, 255, 0.1) !important;
+    transform: scale(1.02);
+}