From 1679398c231ec09241c871bd3ff8e0b1d0a8d246 Mon Sep 17 00:00:00 2001
From: Timon W <121683008+TimonW-Dev@users.noreply.github.com>
Date: Tue, 10 Dec 2024 21:10:51 +0100
Subject: [PATCH 1/5] Added sticky timline to the os_familytree.htm page

---
 os_familytree.htm | 157 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 130 insertions(+), 27 deletions(-)
diff --git a/os_familytree.htm b/os_familytree.htm
index 99f9931..0514e76 100644
--- a/os_familytree.htm
+++ b/os_familytree.htm
@@ -1,52 +1,155 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Operating Systems: Timeline and Family Tree</title>
-<meta name="description" content="Operating Systems: Timeline and Family Tree">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta charset="UTF-8">
-<meta name="keywords" content="Technology, Browsers, Firefox, Chrome, Edge, Safari, Brave, Vivaldi, Operating Systems, Desktop Environments, GNOME, KDE, Xfce, Linux, Unix, BSD, Solaris, Windows, macOS, Instant Messengers, Chat, Software, Cloud, Sync, Email, Privacy">
-<meta name="author" content="Alphonse Eylenburg">
-<link rel="stylesheet" href="style.css">
+    <title>Operating Systems: Timeline and Family Tree</title>
+    <meta name="description" content="Operating Systems: Timeline and Family Tree">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <meta name="keywords" content="Technology, Browsers, Firefox, Chrome, Edge, Safari, Brave, Vivaldi, Operating Systems, Desktop Environments, GNOME, KDE, Xfce, Linux, Unix, BSD, Solaris, Windows, macOS, Instant Messengers, Chat, Software, Cloud, Sync, Email, Privacy">
+    <meta name="author" content="Alphonse Eylenburg">
+    <link rel="stylesheet" href="style.css">
+    <style>
+        .year-header {
+            position: sticky;
+            top: 0;
+            background-color: white;
+        }
+
+        .timeline-table {
+            display: flex;
+            height: 30px;
+            white-space: nowrap;
+            margin-left: 10px;
+        }
+
+        .timeline-table div {
+            width: 29.018px;
+            text-align: center;
+            border-right: 1px solid #ccc;
+            line-height: 30px;
+            background-color: #f0f0f0;
+            font-size: 11px;
+        }
+
+        .timeline-table div:last-child {
+            border-right: none;
+        }
+
+        #toggleButton {
+            margin: 10px 0;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            cursor: pointer;
+        }
+
+        #toggleButton.active {
+            background-color: lightcoral;
+        }
+
+        #toggleButton.inactive {
+            background-color: lightgreen;
+        }
+    </style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 
 <script src="top.js"></script>
 <header>
-<p><a href="index.html">&larr; Sitemap</a></p>
+    <p><a href="index.html">&larr; Sitemap</a></p>
 </header>
 
 <h1>Operating Systems: Timeline and Family Tree</h1>
 <h2>Includes about 1,130 operating systems so far</h2>
 <p style="color: red; font-size: small;">Last updated: August 2024</p>
 <p>In this post you'll find a family tree and timeline of operating systems. I have tried to include all operating systems, no matter how old or obscure. Of course, a complete list is virtually impossible, as there is no way to catalogue all the tiny hobby and embedded systems that may exist somewhere.<br /><br />
-Please also note that I only included a few selected Linux/BSD/Solaris distributions (it is arguable whether these should count as an OS on their own or not).<br /><br />
-Currently, the family tree includes between around 1,120 different operating systems (including some renamings). Tip: use Ctrl+F (Cmd+F on Mac) to search for a system.</p>
+    Please also note that I only included a few selected Linux/BSD/Solaris distributions (it is arguable whether these should count as an OS on their own or not).<br /><br />
+    Currently, the family tree includes between around 1,120 different operating systems (including some renamings). Tip: use Ctrl+F (Cmd+F on Mac) to search for a system.</p>
 
-<p><strong>There are some missing system and some corrections that are not included in the graphic below yet. <a href="/eylenburg/eylenburg.github.io/issues/80" target"_blank">Please see here for the issue tracker.</a></strong></p>
+<p><strong>There are some missing system and some corrections that are not included in the graphic below yet. <a href="/eylenburg/eylenburg.github.io/issues/80" target="_blank">Please see here for the issue tracker.</a></strong>
+    <br />If you'd like to help out, you can <a href="/eylenburg/os-family-tree">contribute here</a>.</p>
 
-<object type="image/svg+xml" data="pics/Eylenburg_Operating_System_Timeline_Family_Tree.svg"></object>
+<button id="toggleButton" class="active">Disable sticky timeline</button>
 
-<p><strong>If anyone would like to make corrections, please feel tell me.</strong><br />
-<i>Big Update August 2021: Thank you for everyone e-mailing me with suggestions after this webpage got posted on Hackernews by someone. I have added most of the suggestions, such as missing operating systems and a few mistakes.</i><br />
-<i>Big Update February 2023: I added another 200 or so operating systems and made some corrections.</i><br />
-<i>Update July 2024: I added another 30-ish operating systems and made some corrections and updates.</p>
+<div class="year-header">
+    <div class="timeline-table" id="timelineTable"></div>
+</div>
 
+<object type="image/svg+xml" data="pics/Eylenburg_Operating_System_Timeline_Family_Tree.svg" id="svgGraphic"></object>
+
+<p><strong>If anyone would like to make corrections, please feel tell me.</strong><br />
+    <i>Big Update August 2021: Thank you for everyone e-mailing me with suggestions after this webpage got posted on Hackernews by someone. I have added most of the suggestions, such as missing operating systems and a few mistakes.</i><br />
+    <i>Big Update February 2023: I added another 200 or so operating systems and made some corrections.</i><br />
+    <i>Update July 2024: I added another 30-ish operating systems and made some corrections and updates.</p>
 
 <p>Colour guide:<br />
 
-<ul>
-<li>Dark Purple: Apple</li>
-<li>Cyan: Microsoft</li>
-<li>Red: Unix-like</li>
-<li>Green: RSX/VMS-like</li>
-<li>Dark Blue: DOS-like</li>
-<li>Orange: AmigaOS-like</li>
-<li>Brown: mainframe systems</li>
-<li>Yellow: L4 microkernel family</li>
-<li>Bright Purple: OSEK-compliant</li>
-</ul>
+    <ul>
+        <li>Dark Purple: Apple</li>
+        <li>Cyan: Microsoft</li>
+        <li>Red: Unix-like</li>
+        <li>Green: RSX/VMS-like</li>
+        <li>Dark Blue: DOS-like</li>
+        <li>Orange: AmigaOS-like</li>
+        <li>Brown: mainframe systems</li>
+        <li>Yellow: L4 microkernel family</li>
+        <li>Bright Purple: OSEK-compliant</li>
+    </ul>
 
 <script src="bottom.js "></script>
+<script>
+    // Toggle button functionality
+    const toggleButton = document.getElementById('toggleButton');
+    const yearHeader = document.querySelector('.year-header');
+
+    toggleButton.addEventListener('click', () => {
+        if (toggleButton.classList.contains('active')) {
+            yearHeader.style.display = 'none';
+            toggleButton.textContent = 'Enable sticky timeline';
+            toggleButton.classList.remove('active');
+            toggleButton.classList.add('inactive');
+        } else {
+            yearHeader.style.display = 'block';
+            toggleButton.textContent = 'Disable sticky timeline';
+            toggleButton.classList.remove('inactive');
+            toggleButton.classList.add('active');
+        }
+    });
+
+    // Dynamically adjust the timeline width to match the SVG width
+    function renderTimeline() {
+        const svgGraphic = document.getElementById('svgGraphic');
+        const timelineTable = document.getElementById('timelineTable');
+        const startYear = 1951;
+        const endYear = 2100;
+        const cellWidth = 30;
+
+        svgGraphic.addEventListener('load', () => {
+            const svgWidth = svgGraphic.getBoundingClientRect().width;
+
+            // Ensure the timeline container matches the SVG width
+            timelineTable.style.width = `${svgWidth}px`;
+
+            // Clear previous timeline content
+            timelineTable.innerHTML = '';
+
+            // Calculate the number of years that fit within the SVG width
+            const yearsToShow = Math.floor(svgWidth / cellWidth);
+
+            for (let year = startYear; year < startYear + yearsToShow; year++) {
+                const cell = document.createElement('div');
+                cell.textContent = year;
+                timelineTable.appendChild(cell);
+            }
+        });
+    }
+
+    // Call the function when the page loads
+    renderTimeline();
+
+    // Optional: Re-render the timeline on window resize
+    window.addEventListener('resize', renderTimeline);
+</script>
 </body>
 </html>

From c08a628dad4d0040e7c8b429e431423c7e954448 Mon Sep 17 00:00:00 2001
From: Timon W <121683008+TimonW-Dev@users.noreply.github.com>
Date: Tue, 10 Dec 2024 21:20:33 +0100
Subject: [PATCH 2/5] Formatting changes

---
 os_familytree.htm | 118 +++++++++++++++++++++++-----------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/os_familytree.htm b/os_familytree.htm
index 1e4bc96..a02aa28 100644
--- a/os_familytree.htm
+++ b/os_familytree.htm
@@ -1,71 +1,71 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Operating Systems: Timeline and Family Tree</title>
-    <meta name="description" content="Operating Systems: Timeline and Family Tree">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <meta name="keywords" content="Technology, Browsers, Firefox, Chrome, Edge, Safari, Brave, Vivaldi, Operating Systems, Desktop Environments, GNOME, KDE, Xfce, Linux, Unix, BSD, Solaris, Windows, macOS, Instant Messengers, Chat, Software, Cloud, Sync, Email, Privacy">
-    <meta name="author" content="Alphonse Eylenburg">
-    <link rel="stylesheet" href="style.css">
-    <style>
-        .year-header {
-            position: sticky;
-            top: 0;
-            background-color: white;
-        }
+<title>Operating Systems: Timeline and Family Tree</title>
+<meta name="description" content="Operating Systems: Timeline and Family Tree">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="UTF-8">
+<meta name="keywords" content="Technology, Browsers, Firefox, Chrome, Edge, Safari, Brave, Vivaldi, Operating Systems, Desktop Environments, GNOME, KDE, Xfce, Linux, Unix, BSD, Solaris, Windows, macOS, Instant Messengers, Chat, Software, Cloud, Sync, Email, Privacy">
+<meta name="author" content="Alphonse Eylenburg">
+<link rel="stylesheet" href="style.css">
+<style>
+    .year-header {
+        position: sticky;
+        top: 0;
+        background-color: white;
+    }
 
-        .timeline-table {
-            display: flex;
-            height: 30px;
-            white-space: nowrap;
-            margin-left: 10px;
-        }
+    .timeline-table {
+        display: flex;
+        height: 30px;
+        white-space: nowrap;
+        margin-left: 10px;
+    }
 
-        .timeline-table div {
-            width: 29.018px;
-            text-align: center;
-            border-right: 1px solid #ccc;
-            line-height: 30px;
-            background-color: #f0f0f0;
-            font-size: 11px;
-        }
+    .timeline-table div {
+        width: 29.018px;
+        text-align: center;
+        border-right: 1px solid #ccc;
+        line-height: 30px;
+        background-color: #f0f0f0;
+        font-size: 11px;
+    }
 
-        .timeline-table div:last-child {
-            border-right: none;
-        }
+    .timeline-table div:last-child {
+        border-right: none;
+    }
 
-        #toggleButton {
-            margin: 10px 0;
-            padding: 10px;
-            border: none;
-            border-radius: 5px;
-            color: white;
-            cursor: pointer;
-        }
+    #toggleButton {
+        margin: 10px 0;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+        color: white;
+        cursor: pointer;
+    }
 
-        #toggleButton.active {
-            background-color: lightcoral;
-        }
+    #toggleButton.active {
+        background-color: lightcoral;
+    }
 
-        #toggleButton.inactive {
-            background-color: lightgreen;
-        }
-    </style>
+    #toggleButton.inactive {
+        background-color: lightgreen;
+    }
+</style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 
 <script src="top.js"></script>
 <header>
-    <p><a href="index.html">&larr; Sitemap</a></p>
+<p><a href="index.html">&larr; Sitemap</a></p>
 </header>
 
 <h1>Operating Systems: Timeline and Family Tree</h1>
 <h2>Includes about 1,130 operating systems so far</h2>
 <p style="color: red; font-size: small;">Last updated: August 2024</p>
 <p>In this post you'll find a family tree and timeline of operating systems. I have tried to include all operating systems, no matter how old or obscure. Of course, a complete list is virtually impossible, as there is no way to catalogue all the tiny hobby and embedded systems that may exist somewhere.<br /><br />
-    Please also note that I only included a few selected Linux/BSD/Solaris distributions (it is arguable whether these should count as an OS on their own or not).<br /><br />
-    Currently, the family tree includes between around 1,120 different operating systems (including some renamings). Tip: use Ctrl+F (Cmd+F on Mac) to search for a system.</p>
+Please also note that I only included a few selected Linux/BSD/Solaris distributions (it is arguable whether these should count as an OS on their own or not).<br /><br />
+Currently, the family tree includes between around 1,120 different operating systems (including some renamings). Tip: use Ctrl+F (Cmd+F on Mac) to search for a system.</p>
 
 <p><strong>There are some missing system and some corrections that are not included in the graphic below yet. <a href="/eylenburg/eylenburg.github.io/issues/80" target"_blank">Please see here for the issue tracker.</a></strong>
 <br />If you'd like to help out, you can <a href="/eylenburg/os-family-tree">contribute here</a>.</p>
@@ -85,17 +85,17 @@ <h2>Includes about 1,130 operating systems so far</h2>
 
 <p>Colour guide:<br />
 
-    <ul>
-        <li>Dark Purple: Apple</li>
-        <li>Cyan: Microsoft</li>
-        <li>Red: Unix-like</li>
-        <li>Green: RSX/VMS-like</li>
-        <li>Dark Blue: DOS-like</li>
-        <li>Orange: AmigaOS-like</li>
-        <li>Brown: mainframe systems</li>
-        <li>Yellow: L4 microkernel family</li>
-        <li>Bright Purple: OSEK-compliant</li>
-    </ul>
+<ul>
+<li>Dark Purple: Apple</li>
+<li>Cyan: Microsoft</li>
+<li>Red: Unix-like</li>
+<li>Green: RSX/VMS-like</li>
+<li>Dark Blue: DOS-like</li>
+<li>Orange: AmigaOS-like</li>
+<li>Brown: mainframe systems</li>
+<li>Yellow: L4 microkernel family</li>
+<li>Bright Purple: OSEK-compliant</li>
+</ul>
 
 <script src="bottom.js "></script>
 <script>

From 6add48e779f8fd92b577b9e2bd9f5f4a6b35380e Mon Sep 17 00:00:00 2001
From: Timon W <121683008+TimonW-Dev@users.noreply.github.com>
Date: Tue, 10 Dec 2024 21:21:27 +0100
Subject: [PATCH 3/5] Formatting changes

---
 os_familytree.htm | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/os_familytree.htm b/os_familytree.htm
index a02aa28..8b39410 100644
--- a/os_familytree.htm
+++ b/os_familytree.htm
@@ -79,9 +79,9 @@ <h2>Includes about 1,130 operating systems so far</h2>
 <object type="image/svg+xml" data="pics/Eylenburg_Operating_System_Timeline_Family_Tree.svg"></object>
 
 <p><strong>If anyone would like to make corrections, please feel tell me.</strong><br />
-    <i>Big Update August 2021: Thank you for everyone e-mailing me with suggestions after this webpage got posted on Hackernews by someone. I have added most of the suggestions, such as missing operating systems and a few mistakes.</i><br />
-    <i>Big Update February 2023: I added another 200 or so operating systems and made some corrections.</i><br />
-    <i>Update July 2024: I added another 30-ish operating systems and made some corrections and updates.</p>
+<i>Big Update August 2021: Thank you for everyone e-mailing me with suggestions after this webpage got posted on Hackernews by someone. I have added most of the suggestions, such as missing operating systems and a few mistakes.</i><br />
+<i>Big Update February 2023: I added another 200 or so operating systems and made some corrections.</i><br />
+<i>Update July 2024: I added another 30-ish operating systems and made some corrections and updates.</p>
 
 <p>Colour guide:<br />
 

From 8198b94a933e9c3e58ee57e94d1e91ab58c00e6c Mon Sep 17 00:00:00 2001
From: Timon W <121683008+TimonW-Dev@users.noreply.github.com>
Date: Tue, 10 Dec 2024 21:21:52 +0100
Subject: [PATCH 4/5] Formatting changes

---
 os_familytree.htm | 1 +
 1 file changed, 1 insertion(+)

diff --git a/os_familytree.htm b/os_familytree.htm
index 8b39410..9092957 100644
--- a/os_familytree.htm
+++ b/os_familytree.htm
@@ -83,6 +83,7 @@ <h2>Includes about 1,130 operating systems so far</h2>
 <i>Big Update February 2023: I added another 200 or so operating systems and made some corrections.</i><br />
 <i>Update July 2024: I added another 30-ish operating systems and made some corrections and updates.</p>
 
+
 <p>Colour guide:<br />
 
 <ul>

From dc1ec65ef6c10609565657d7154264b938931a95 Mon Sep 17 00:00:00 2001
From: Timon W <121683008+TimonW-Dev@users.noreply.github.com>
Date: Tue, 10 Dec 2024 21:27:22 +0100
Subject: [PATCH 5/5] Bugfix

---
 os_familytree.htm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/os_familytree.htm b/os_familytree.htm
index 9092957..d03ed49 100644
--- a/os_familytree.htm
+++ b/os_familytree.htm
@@ -76,7 +76,7 @@ <h2>Includes about 1,130 operating systems so far</h2>
     <div class="timeline-table" id="timelineTable"></div>
 </div>
 
-<object type="image/svg+xml" data="pics/Eylenburg_Operating_System_Timeline_Family_Tree.svg"></object>
+<object type="image/svg+xml" data="pics/Eylenburg_Operating_System_Timeline_Family_Tree.svg" id="svgGraphic"></object>
 
 <p><strong>If anyone would like to make corrections, please feel tell me.</strong><br />
 <i>Big Update August 2021: Thank you for everyone e-mailing me with suggestions after this webpage got posted on Hackernews by someone. I have added most of the suggestions, such as missing operating systems and a few mistakes.</i><br />
