From 8897f5693e940e2b47a86e2617da4035c66881dd Mon Sep 17 00:00:00 2001
From: PmNz8 <86913474+PmNz8@users.noreply.github.com>
Date: Wed, 2 Sep 2026 15:11:17 +0200
Subject: [PATCH 1/4] Add Divinity II modding tools landing page

---
 index.html | 661 +++++++++++++++++++++++++++--------------------------
 1 file changed, 339 insertions(+), 322 deletions(-)
diff --git a/index.html b/index.html
index 9c4230f9b..102ba2c75 100644
--- a/index.html
+++ b/index.html
@@ -1,322 +1,339 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Real Estate Data Visualization</title>
-    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.0/adapter.moment.min.js" defer></script>
-    <style>
-        .chart-container {
-            width: 50%;
-            margin: 0 auto;
-            min-height: 1024px;
-        }
-
-        canvas {
-            display: block;
-            max-width: 100%;
-        }
-
-        .toggle-button {
-            background-color: #4CAF50;
-            color: white;
-            padding: 10px 20px;
-            margin: 5px 0 10px 0;
-            /* Combined margin property */
-            border: none;
-            cursor: pointer;
-            border-radius: 5px;
-            text-align: center;
-            display: block;
-        }
-
-        .button {
-            text-decoration: none;
-            background-color: #4CAF50;
-            color: white;
-            padding: 10px 20px;
-            margin: 0 10px;
-            border: none;
-            cursor: pointer;
-            border-radius: 5px;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="buttons-container" style="text-align:center; margin-bottom:20px; margin-top:20px">
-        <a href="https://PmNz8.github.io/" class="button">Wojewódzkie wtórny</a>
-        <a href="https://PmNz8.github.io/slask_pierwotny/slask_pierwotny.html" class="button">Śląskie Pierwotny</a>
-        <a href="https://PmNz8.github.io/slask_wtorny/slask_wtorny.html" class="button">Śląsk Wtórny</a>
-		<a href="https://PmNz8.github.io/all_wtorny/all_wtorny.html" class="button">Polska Wtórny</a>
-		<a href="https://PmNz8.github.io/all_1d_new/all_1d_wtorny.html" class="button">Polska Wtórny - nowe oferty z ostatnich 24h</a>
-		<a href="https://PmNz8.github.io/all_7d_new/all_7d_wtorny.html" class="button">Polska Wtórny - nowe oferty z ostatnich 7 dni</a>
-        <a href="https://PmNz8.github.io/size/all_wtorny_sizes.html" class="button">Polska Wtórny Rozmiary</a>
-    </div>
-    <div class="chart-container">
-        <button class="toggle-button" onclick="toggleGlobalDataLines()">Toggle All Cities</button>
-        <canvas id="offersChart"></canvas>
-    </div>
-    <div class="chart-container">
-        <canvas id="avgPriceChart"></canvas>
-    </div>
-    <div class="chart-container">
-        <canvas id="pricePerSqMeterChart"></canvas>
-    </div>
-    <div class="chart-container">
-        <canvas id="avgFlatSizeChart"></canvas>
-    </div>
-    <div class="chart-container">
-        <canvas id="totalPriceChart"></canvas>
-    </div>
-    <div class="chart-container">
-        <canvas id="totalAreaChart"></canvas>
-    </div>
-    <script>
-        // URLs of the text files
-        const urls = [
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/bialystok_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/bydgoszcz_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/gdansk_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/gorzow-wielkopolski_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/katowice_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/kielce_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/krakow_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/lodz_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/lublin_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/olsztyn_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/opole_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/poznan_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/rzeszow_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/szczecin_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/torun_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/warszawa_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/wroclaw_flatdata.txt',
-            'https://raw.githubusercontent.com/PmNz8/PmNz8.github.io/main/zielona-gora_flatdata.txt'
-        ];
-
-        // Object to hold processed data for each city
-        let cityData = {};
-        let charts = {}; // Storing chart instances
-        let cityColors = {}; // Storing colors for each city
-
-        // Function to process text data from each file
-        function processTextData(text, cityName) {
-            // Split the text into lines
-            const lines = text.trim().split('\n');
-            // Process each line
-            lines.forEach(line => {
-                const fields = line.split(' ');
-                if (fields.length >= 8) {
-                    const date = fields[0];
-                    const data = {
-                        date: date,
-                        numberOfOffers: parseInt(fields[3], 10),
-                        avgFlatPrice: parseFloat(fields[4]),
-                        pricePerSqMeter: parseFloat(fields[5]),
-                        avgFlatSize: parseFloat(fields[6]),
-                        totalPrice: parseFloat(fields[7]),
-                        totalArea: parseFloat(fields[8])
-                    };
-                    if (!cityData[cityName]) {
-                        cityData[cityName] = {
-                            dates: [],
-                            numberOfOffers: [],
-                            avgFlatPrices: [],
-                            pricesPerSqMeter: [],
-                            avgFlatSizes: [],
-                            totalPrices: [],
-                            totalAreas: []
-                        };
-                    }
-                    cityData[cityName].dates.push(data.date);
-                    cityData[cityName].numberOfOffers.push(data.numberOfOffers);
-                    cityData[cityName].avgFlatPrices.push(data.avgFlatPrice);
-                    cityData[cityName].pricesPerSqMeter.push(data.pricePerSqMeter);
-                    cityData[cityName].avgFlatSizes.push(data.avgFlatSize);
-                    cityData[cityName].totalPrices.push(data.totalPrice);
-                    cityData[cityName].totalAreas.push(data.totalArea);
-                } else {
-                    console.error(`Invalid data format for ${cityName}: `, line);
-                }
-            });
-        }
-
-        function getRandomColor() {
-            const letters = '0123456789ABCDEF';
-            let color = '#';
-            for (let i = 0; i < 6; i++) {
-                color += letters[Math.floor(Math.random() * 16)];
-            }
-            return color;
-        }
-
-        function initializeCityColors() {
-            urls.forEach(url => {
-                const match = url.match(/\/([\w-]+)_flatdata\.txt$/);
-                if (match && match.length > 1) {
-                    const cityName = match[1].replace(/-/g, ' '); // Format city name
-                    cityColors[cityName] = getRandomColor(); // Assign a unique color to each city
-                }
-            });
-        }
-
-        initializeCityColors();
-
-        // A function to create a Chart.js dataset
-        function createDataset(cityData, key, cityName) {
-            const color = cityColors[cityName];
-            return {
-                label: cityName, // Now the label is just the city name
-                data: cityData[key].map((value, index) => ({ x: cityData.dates[index], y: value })),
-                fill: false,
-                borderColor: color,
-                pointBackgroundColor: color,
-                pointBorderColor: color,
-                pointHoverBackgroundColor: color,
-                pointHoverBorderColor: color
-            };
-        }
-
-        function toggleGlobalDataLines() {
-            // Iterate over all city names and toggle their visibility in all charts
-            Object.keys(cityColors).forEach(cityName => {
-                toggleDataLines(cityName);
-            });
-        }
-
-        function toggleDataLines(datasetLabel) {
-            // Iterate over all charts
-            for (const chartId in charts) {
-                const chart = charts[chartId];
-
-                // Find the dataset by label and toggle its visibility
-                const dataset = chart.data.datasets.find(d => d.label === datasetLabel);
-                if (dataset) {
-                    dataset.hidden = !dataset.hidden;
-                }
-
-                // Update the chart
-                chart.update();
-            }
-        }
-
-        function handleLegendClick(e, legendItem) {
-            const index = legendItem.datasetIndex;
-
-            // Iterate over all chart instances
-            Object.values(charts).forEach((chart) => {
-                const meta = chart.getDatasetMeta(index);
-
-                // Toggle visibility
-                meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
-
-                // Update the chart
-                chart.update();
-            });
-        }
-
-        function createChart(canvasId, chartTitle, datasetKey) {
-            const ctx = document.getElementById(canvasId).getContext('2d');
-            charts[canvasId] = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: cityData[Object.keys(cityData)[0]].dates,
-                    datasets: Object.keys(cityData).map(cityName => createDataset(cityData[cityName], datasetKey, cityName))
-                },
-                options: {
-                    scales: {
-                        xAxes: [{
-                            type: 'time',
-                            time: {
-                                parser: 'YYYY-MM-DD',
-                                tooltipFormat: 'll',
-                                unit: 'day'
-                            },
-                            scaleLabel: {
-                                display: true,
-                                labelString: 'Date'
-                            }
-                        }],
-                        yAxes: [{
-                            ticks: {
-                                beginAtZero: false,
-                            }
-                        }]
-                    },
-                    legend: {
-                        onClick: handleLegendClick
-                    },
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    title: {
-                        display: true,
-                        text: chartTitle
-                    }
-                }
-            });
-        }
-
-        function initializeCharts() {
-            createChart('offersChart', 'Number of Sale Offers', 'numberOfOffers');
-            createChart('avgPriceChart', 'Average Flat Price', 'avgFlatPrices');
-            createChart('pricePerSqMeterChart', 'Average Price per Square Meter', 'pricesPerSqMeter');
-            createChart('avgFlatSizeChart', 'Average Flat Size', 'avgFlatSizes');
-            createChart('totalPriceChart', 'Total Sum of All Prices', 'totalPrices');
-            createChart('totalAreaChart', 'Total Sum of All Flat Areas', 'totalAreas');
-        }
-
-        // Async function to fetch and process data for a single URL
-        async function fetchData(url) {
-            try {
-                const response = await fetch(url);
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const data = await response.text();
-                const match = url.match(/\/([\w-]+)_flatdata\.txt$/);
-                if (match && match.length > 1) {
-                    const cityName = match[1].replace(/-/g, ' ');
-                    processTextData(data, cityName);
-                } else {
-                    console.error('Could not extract city name from URL:', url);
-                }
-            } catch (error) {
-                console.error(`Fetch and processing failed for URL: ${url}`, error);
-            }
-        }
-
-        // Function to initialize data fetching and processing for all URLs
-        async function initializeData() {
-            const fetchPromises = urls.map(url => fetchData(url));
-            await Promise.all(fetchPromises);
-            console.log("All data fetched and processed, creating charts...");
-            // Call your function to initialize charts here
-            initializeCharts();
-        }
-
-        // Call initializeData at the end of your script
-        initializeData();
-    </script>
-    <script>
-        document.addEventListener("DOMContentLoaded", function (event) {
-            // Simple check for mobile devices
-            if (/Mobi|Android/i.test(navigator.userAgent)) {
-                // It's a mobile device, adjust the .chart-container width to 100%
-                var chartContainers = document.querySelectorAll('.chart-container');
-                chartContainers.forEach(function (container) {
-                    container.style.width = '100%';
-                });
-            } else {
-                // Not a mobile device, adjust the .chart-container width to 50%
-                var chartContainers = document.querySelectorAll('.chart-container');
-                chartContainers.forEach(function (container) {
-                    container.style.width = '50%';
-                });
-            }
-        });
-    </script>
-</body>
-
-</html>
\ No newline at end of file
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Modding tools for Divinity II: Developer's Cut by PmNz8.">
+  <title>PmNz8 · Divinity II Modding Tools</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #0b0d10;
+      --panel: rgba(18, 22, 28, 0.88);
+      --panel-hover: rgba(24, 30, 38, 0.96);
+      --border: rgba(255, 255, 255, 0.08);
+      --text: #edf2f7;
+      --muted: #9aa6b2;
+      --accent: #d98c3f;
+      --accent-soft: rgba(217, 140, 63, 0.16);
+      --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
+    }
+
+    * { box-sizing: border-box; }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--text);
+      background:
+        radial-gradient(circle at 15% 0%, rgba(217, 140, 63, 0.10), transparent 32rem),
+        radial-gradient(circle at 85% 15%, rgba(100, 130, 180, 0.08), transparent 28rem),
+        linear-gradient(180deg, #0b0d10 0%, #0f1217 55%, #0b0d10 100%);
+    }
+
+    a { color: inherit; }
+
+    .shell {
+      width: min(1100px, calc(100% - 32px));
+      margin: 0 auto;
+    }
+
+    header {
+      padding: 28px 0 8px;
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      text-decoration: none;
+      font-weight: 700;
+      letter-spacing: 0.02em;
+    }
+
+    .brand-mark {
+      width: 12px;
+      height: 12px;
+      border-radius: 3px;
+      background: var(--accent);
+      box-shadow: 0 0 22px rgba(217, 140, 63, 0.6);
+    }
+
+    .nav-link {
+      color: var(--muted);
+      text-decoration: none;
+      font-size: 0.95rem;
+    }
+
+    .nav-link:hover { color: var(--text); }
+
+    .hero {
+      padding: 100px 0 64px;
+      max-width: 780px;
+    }
+
+    .eyebrow {
+      margin: 0 0 16px;
+      color: var(--accent);
+      font-size: 0.8rem;
+      font-weight: 800;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+
+    h1 {
+      margin: 0;
+      max-width: 760px;
+      font-size: clamp(2.5rem, 7vw, 5.2rem);
+      line-height: 0.98;
+      letter-spacing: -0.045em;
+    }
+
+    .hero p {
+      margin: 26px 0 0;
+      max-width: 680px;
+      color: var(--muted);
+      font-size: clamp(1rem, 2vw, 1.15rem);
+      line-height: 1.75;
+    }
+
+    .hero-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 32px;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 44px;
+      padding: 0 18px;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      text-decoration: none;
+      font-weight: 700;
+      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+    }
+
+    .button-primary {
+      background: var(--accent);
+      color: #17110c;
+      border-color: transparent;
+    }
+
+    .button-secondary {
+      background: rgba(255, 255, 255, 0.03);
+      color: var(--text);
+    }
+
+    .button:hover {
+      transform: translateY(-2px);
+      border-color: rgba(255, 255, 255, 0.16);
+    }
+
+    .section {
+      padding: 40px 0 80px;
+    }
+
+    .section-title {
+      margin: 0 0 10px;
+      font-size: 1.8rem;
+      letter-spacing: -0.025em;
+    }
+
+    .section-copy {
+      margin: 0 0 28px;
+      color: var(--muted);
+      line-height: 1.65;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 18px;
+    }
+
+    .card {
+      position: relative;
+      overflow: hidden;
+      min-height: 270px;
+      padding: 28px;
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
+      box-shadow: var(--shadow);
+      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
+    }
+
+    .card::after {
+      content: "";
+      position: absolute;
+      width: 180px;
+      height: 180px;
+      right: -70px;
+      bottom: -70px;
+      border-radius: 50%;
+      background: var(--accent-soft);
+      filter: blur(4px);
+    }
+
+    .card:hover {
+      transform: translateY(-4px);
+      background: var(--panel-hover);
+      border-color: rgba(217, 140, 63, 0.28);
+    }
+
+    .card-kicker {
+      position: relative;
+      z-index: 1;
+      margin: 0 0 12px;
+      color: var(--accent);
+      font-size: 0.78rem;
+      font-weight: 800;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+
+    .card h2 {
+      position: relative;
+      z-index: 1;
+      margin: 0;
+      font-size: 1.55rem;
+      letter-spacing: -0.02em;
+    }
+
+    .card p {
+      position: relative;
+      z-index: 1;
+      margin: 16px 0 26px;
+      max-width: 44ch;
+      color: var(--muted);
+      line-height: 1.65;
+    }
+
+    .card-link {
+      position: relative;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text);
+      text-decoration: none;
+      font-weight: 700;
+    }
+
+    .card-link span {
+      color: var(--accent);
+      transition: transform 160ms ease;
+    }
+
+    .card-link:hover span { transform: translateX(3px); }
+
+    .note {
+      margin-top: 20px;
+      padding: 16px 18px;
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      color: var(--muted);
+      background: rgba(255, 255, 255, 0.025);
+      font-size: 0.92rem;
+    }
+
+    footer {
+      padding: 28px 0 42px;
+      color: var(--muted);
+      font-size: 0.9rem;
+    }
+
+    @media (max-width: 760px) {
+      .hero { padding-top: 72px; }
+      .grid { grid-template-columns: 1fr; }
+      .nav { align-items: flex-start; }
+      .card { min-height: auto; }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="shell nav">
+      <a class="brand" href="https://github.com/PmNz8" aria-label="PmNz8 on GitHub">
+        <span class="brand-mark" aria-hidden="true"></span>
+        <span>PmNz8</span>
+      </a>
+      <a class="nav-link" href="https://github.com/PmNz8">GitHub profile ↗</a>
+    </div>
+  </header>
+
+  <main class="shell">
+    <section class="hero">
+      <p class="eyebrow">Divinity II · Developer's Cut</p>
+      <h1>Modding tools for an old game that deserves better tooling.</h1>
+      <p>
+        A small collection of utilities focused on exploring, modifying and rebuilding
+        assets for <strong>Divinity II: Developer's Cut</strong>.
+      </p>
+      <div class="hero-actions">
+        <a class="button button-primary" href="#tools">Browse tools</a>
+        <a class="button button-secondary" href="https://github.com/PmNz8">View GitHub profile</a>
+      </div>
+    </section>
+
+    <section class="section" id="tools">
+      <h2 class="section-title">Tools</h2>
+      <p class="section-copy">
+        Initial landing page for the project. Repository links are placeholders for now
+        and currently point back to the main GitHub profile.
+      </p>
+
+      <div class="grid">
+        <article class="card">
+          <p class="card-kicker">Texture utility</p>
+          <h2>Texture Viewer</h2>
+          <p>
+            Inspect Divinity II texture assets in a convenient standalone viewer.
+            Intended as a lightweight tool for analysis and modding workflows.
+          </p>
+          <a class="card-link" href="https://github.com/PmNz8">
+            Open project <span>→</span>
+          </a>
+        </article>
+
+        <article class="card">
+          <p class="card-kicker">Build utility</p>
+          <h2>Developer's Cut Patch Builder</h2>
+          <p>
+            Package modified files into patches for Divinity II: Developer's Cut,
+            with a workflow aimed at simple and repeatable mod distribution.
+          </p>
+          <a class="card-link" href="https://github.com/PmNz8">
+            Open project <span>→</span>
+          </a>
+        </article>
+      </div>
+
+      <div class="note">
+        More tools, documentation and screenshots can be added here later without changing
+        the overall layout.
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class="shell">
+      PmNz8 · Divinity II modding tools
+    </div>
+  </footer>
+</body>
+</html>

From 615b887178bbf253ea4575cb19b15e6fed4d6031 Mon Sep 17 00:00:00 2001
From: PmNz8 <86913474+PmNz8@users.noreply.github.com>
Date: Wed, 2 Sep 2026 15:14:42 +0200
Subject: [PATCH 2/4] Simplify Divinity II tools landing page

---
 index.html | 348 ++++++++++-------------------------------------------
 1 file changed, 65 insertions(+), 283 deletions(-)

diff --git a/index.html b/index.html
index 102ba2c75..8229ee98c 100644
--- a/index.html
+++ b/index.html
@@ -3,337 +3,119 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="Modding tools for Divinity II: Developer's Cut by PmNz8.">
-  <title>PmNz8 · Divinity II Modding Tools</title>
+  <meta name="description" content="Small utilities for modding Divinity II: Developer's Cut.">
+  <title>PmNz8 - Divinity II tools</title>
   <style>
     :root {
       color-scheme: dark;
-      --bg: #0b0d10;
-      --panel: rgba(18, 22, 28, 0.88);
-      --panel-hover: rgba(24, 30, 38, 0.96);
-      --border: rgba(255, 255, 255, 0.08);
-      --text: #edf2f7;
-      --muted: #9aa6b2;
-      --accent: #d98c3f;
-      --accent-soft: rgba(217, 140, 63, 0.16);
-      --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
+      --bg: #111315;
+      --panel: #181b1f;
+      --border: #2a2f35;
+      --text: #e6e8ea;
+      --muted: #9aa1a8;
+      --accent: #c9823d;
     }
 
     * { box-sizing: border-box; }
 
-    html { scroll-behavior: smooth; }
-
     body {
       margin: 0;
       min-height: 100vh;
-      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: var(--bg);
       color: var(--text);
-      background:
-        radial-gradient(circle at 15% 0%, rgba(217, 140, 63, 0.10), transparent 32rem),
-        radial-gradient(circle at 85% 15%, rgba(100, 130, 180, 0.08), transparent 28rem),
-        linear-gradient(180deg, #0b0d10 0%, #0f1217 55%, #0b0d10 100%);
     }
 
-    a { color: inherit; }
-
-    .shell {
-      width: min(1100px, calc(100% - 32px));
+    .container {
+      width: min(760px, calc(100% - 32px));
       margin: 0 auto;
-    }
-
-    header {
-      padding: 28px 0 8px;
-    }
-
-    .nav {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-    }
-
-    .brand {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      text-decoration: none;
-      font-weight: 700;
-      letter-spacing: 0.02em;
-    }
-
-    .brand-mark {
-      width: 12px;
-      height: 12px;
-      border-radius: 3px;
-      background: var(--accent);
-      box-shadow: 0 0 22px rgba(217, 140, 63, 0.6);
-    }
-
-    .nav-link {
-      color: var(--muted);
-      text-decoration: none;
-      font-size: 0.95rem;
-    }
-
-    .nav-link:hover { color: var(--text); }
-
-    .hero {
-      padding: 100px 0 64px;
-      max-width: 780px;
-    }
-
-    .eyebrow {
-      margin: 0 0 16px;
-      color: var(--accent);
-      font-size: 0.8rem;
-      font-weight: 800;
-      letter-spacing: 0.14em;
-      text-transform: uppercase;
+      padding: 64px 0;
     }
 
     h1 {
-      margin: 0;
-      max-width: 760px;
-      font-size: clamp(2.5rem, 7vw, 5.2rem);
-      line-height: 0.98;
-      letter-spacing: -0.045em;
-    }
-
-    .hero p {
-      margin: 26px 0 0;
-      max-width: 680px;
-      color: var(--muted);
-      font-size: clamp(1rem, 2vw, 1.15rem);
-      line-height: 1.75;
-    }
-
-    .hero-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      margin-top: 32px;
-    }
-
-    .button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 44px;
-      padding: 0 18px;
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      text-decoration: none;
+      margin: 0 0 12px;
+      font-size: clamp(2rem, 5vw, 2.8rem);
       font-weight: 700;
-      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
-    }
-
-    .button-primary {
-      background: var(--accent);
-      color: #17110c;
-      border-color: transparent;
+      letter-spacing: -0.03em;
     }
 
-    .button-secondary {
-      background: rgba(255, 255, 255, 0.03);
-      color: var(--text);
-    }
-
-    .button:hover {
-      transform: translateY(-2px);
-      border-color: rgba(255, 255, 255, 0.16);
-    }
-
-    .section {
-      padding: 40px 0 80px;
-    }
-
-    .section-title {
-      margin: 0 0 10px;
-      font-size: 1.8rem;
-      letter-spacing: -0.025em;
-    }
-
-    .section-copy {
-      margin: 0 0 28px;
+    .intro {
+      margin: 0 0 40px;
       color: var(--muted);
-      line-height: 1.65;
+      line-height: 1.7;
+      max-width: 620px;
     }
 
-    .grid {
+    .tools {
       display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 18px;
+      gap: 14px;
     }
 
-    .card {
-      position: relative;
-      overflow: hidden;
-      min-height: 270px;
-      padding: 28px;
+    .tool {
+      padding: 20px;
       border: 1px solid var(--border);
-      border-radius: 20px;
-      background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
-      box-shadow: var(--shadow);
-      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
+      border-radius: 10px;
+      background: var(--panel);
     }
 
-    .card::after {
-      content: "";
-      position: absolute;
-      width: 180px;
-      height: 180px;
-      right: -70px;
-      bottom: -70px;
-      border-radius: 50%;
-      background: var(--accent-soft);
-      filter: blur(4px);
-    }
-
-    .card:hover {
-      transform: translateY(-4px);
-      background: var(--panel-hover);
-      border-color: rgba(217, 140, 63, 0.28);
-    }
-
-    .card-kicker {
-      position: relative;
-      z-index: 1;
-      margin: 0 0 12px;
-      color: var(--accent);
-      font-size: 0.78rem;
-      font-weight: 800;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-    }
-
-    .card h2 {
-      position: relative;
-      z-index: 1;
-      margin: 0;
-      font-size: 1.55rem;
-      letter-spacing: -0.02em;
+    .tool h2 {
+      margin: 0 0 8px;
+      font-size: 1.15rem;
     }
 
-    .card p {
-      position: relative;
-      z-index: 1;
-      margin: 16px 0 26px;
-      max-width: 44ch;
+    .tool p {
+      margin: 0 0 14px;
       color: var(--muted);
-      line-height: 1.65;
+      line-height: 1.6;
     }
 
-    .card-link {
-      position: relative;
-      z-index: 1;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      color: var(--text);
-      text-decoration: none;
-      font-weight: 700;
-    }
-
-    .card-link span {
+    .tool a,
+    .profile-link {
       color: var(--accent);
-      transition: transform 160ms ease;
+      text-decoration: none;
     }
 
-    .card-link:hover span { transform: translateX(3px); }
-
-    .note {
-      margin-top: 20px;
-      padding: 16px 18px;
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      color: var(--muted);
-      background: rgba(255, 255, 255, 0.025);
-      font-size: 0.92rem;
+    .tool a:hover,
+    .profile-link:hover {
+      text-decoration: underline;
     }
 
     footer {
-      padding: 28px 0 42px;
+      margin-top: 40px;
+      padding-top: 20px;
+      border-top: 1px solid var(--border);
       color: var(--muted);
       font-size: 0.9rem;
     }
-
-    @media (max-width: 760px) {
-      .hero { padding-top: 72px; }
-      .grid { grid-template-columns: 1fr; }
-      .nav { align-items: flex-start; }
-      .card { min-height: auto; }
-    }
   </style>
 </head>
 <body>
-  <header>
-    <div class="shell nav">
-      <a class="brand" href="https://github.com/PmNz8" aria-label="PmNz8 on GitHub">
-        <span class="brand-mark" aria-hidden="true"></span>
-        <span>PmNz8</span>
-      </a>
-      <a class="nav-link" href="https://github.com/PmNz8">GitHub profile ↗</a>
-    </div>
-  </header>
-
-  <main class="shell">
-    <section class="hero">
-      <p class="eyebrow">Divinity II · Developer's Cut</p>
-      <h1>Modding tools for an old game that deserves better tooling.</h1>
-      <p>
-        A small collection of utilities focused on exploring, modifying and rebuilding
-        assets for <strong>Divinity II: Developer's Cut</strong>.
-      </p>
-      <div class="hero-actions">
-        <a class="button button-primary" href="#tools">Browse tools</a>
-        <a class="button button-secondary" href="https://github.com/PmNz8">View GitHub profile</a>
-      </div>
+  <main class="container">
+    <h1>Divinity II: Developer's Cut tools</h1>
+    <p class="intro">
+      A small collection of hobby tools I use while experimenting with and modding
+      Divinity II: Developer's Cut.
+    </p>
+
+    <section class="tools" aria-label="Tools">
+      <article class="tool">
+        <h2>Texture Viewer</h2>
+        <p>Simple utility for viewing texture files used by Divinity II.</p>
+        <a href="https://github.com/PmNz8">GitHub</a>
+      </article>
+
+      <article class="tool">
+        <h2>Divinity II Developer's Cut Patch Builder</h2>
+        <p>Small utility for building patch files for modified game content.</p>
+        <a href="https://github.com/PmNz8">GitHub</a>
+      </article>
     </section>
 
-    <section class="section" id="tools">
-      <h2 class="section-title">Tools</h2>
-      <p class="section-copy">
-        Initial landing page for the project. Repository links are placeholders for now
-        and currently point back to the main GitHub profile.
-      </p>
-
-      <div class="grid">
-        <article class="card">
-          <p class="card-kicker">Texture utility</p>
-          <h2>Texture Viewer</h2>
-          <p>
-            Inspect Divinity II texture assets in a convenient standalone viewer.
-            Intended as a lightweight tool for analysis and modding workflows.
-          </p>
-          <a class="card-link" href="https://github.com/PmNz8">
-            Open project <span>→</span>
-          </a>
-        </article>
-
-        <article class="card">
-          <p class="card-kicker">Build utility</p>
-          <h2>Developer's Cut Patch Builder</h2>
-          <p>
-            Package modified files into patches for Divinity II: Developer's Cut,
-            with a workflow aimed at simple and repeatable mod distribution.
-          </p>
-          <a class="card-link" href="https://github.com/PmNz8">
-            Open project <span>→</span>
-          </a>
-        </article>
-      </div>
-
-      <div class="note">
-        More tools, documentation and screenshots can be added here later without changing
-        the overall layout.
-      </div>
-    </section>
+    <footer>
+      More information and source code will be added later.
+      <br>
+      <a class="profile-link" href="https://github.com/PmNz8">github.com/PmNz8</a>
+    </footer>
   </main>
-
-  <footer>
-    <div class="shell">
-      PmNz8 · Divinity II modding tools
-    </div>
-  </footer>
 </body>
 </html>

From 63564f705d1a9e056bc75a8f3dfe9298cde30701 Mon Sep 17 00:00:00 2001
From: PmNz8 <86913474+PmNz8@users.noreply.github.com>
Date: Wed, 2 Sep 2026 15:17:10 +0200
Subject: [PATCH 3/4] Touchup

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 8229ee98c..ddd0d6a3f 100644
--- a/index.html
+++ b/index.html
@@ -100,13 +100,13 @@ <h1>Divinity II: Developer's Cut tools</h1>
     <section class="tools" aria-label="Tools">
       <article class="tool">
         <h2>Texture Viewer</h2>
-        <p>Simple utility for viewing texture files used by Divinity II.</p>
+        <p>Simple utility for viewing and exporting texture files used by Divinity II. Works together with Patch Builder</p>
         <a href="https://github.com/PmNz8">GitHub</a>
       </article>
 
       <article class="tool">
         <h2>Divinity II Developer's Cut Patch Builder</h2>
-        <p>Small utility for building patch files for modified game content.</p>
+        <p>Small utility for building modded patch files for modified game content. Works together with the remaining tools.</p>
         <a href="https://github.com/PmNz8">GitHub</a>
       </article>
     </section>

From dbd6ed7d1b06996d22b28afa96ae38e3f294f2ca Mon Sep 17 00:00:00 2001
From: PmNz8 <86913474+PmNz8@users.noreply.github.com>
Date: Wed, 2 Sep 2026 15:18:21 +0200
Subject: [PATCH 4/4] Next touchups

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index ddd0d6a3f..5c28eda95 100644
--- a/index.html
+++ b/index.html
@@ -94,13 +94,13 @@
     <h1>Divinity II: Developer's Cut tools</h1>
     <p class="intro">
       A small collection of hobby tools I use while experimenting with and modding
-      Divinity II: Developer's Cut.
+      Divinity II: Developer's Cut. Tested with GOG version. Available as-is.
     </p>
 
     <section class="tools" aria-label="Tools">
       <article class="tool">
         <h2>Texture Viewer</h2>
-        <p>Simple utility for viewing and exporting texture files used by Divinity II. Works together with Patch Builder</p>
+        <p>Simple utility for viewing and exporting texture files used by Divinity II. Works together with Patch Builder.</p>
         <a href="https://github.com/PmNz8">GitHub</a>
       </article>
 
