-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathos_familytree.htm
165 lines (137 loc) · 7.04 KB
/
os_familytree.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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;
}
.timeline-table {
color: black;
display: flex;
height: 30px;
white-space: nowrap;
margin-left: 10px;
}
.timeline-table div {
flex: 1;
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;
margin-right: 20px;
}
#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>
</head>
<body>
<script src="top.js"></script>
<header>
<p><a href="index.html">← Sitemap</a></p>
</header>
<h1>Operating Systems: Timeline and Family Tree</h1>
<h2>Includes about 1,193 operating systems so far</h2>
<p style="color: red; font-size: small;">Last updated: January 2025</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 around 1,185 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="https://github.com/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="https://github.com/eylenburg/os-family-tree">contribute here</a>.</p>
<button id="toggleButton" class="active">Disable sticky timeline</button>
<br>
<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.<br />
Update December 2024: I added another 25-ish operating systems and made some corrections and updates.
<br />Update January 2025: And some more.</p>
<p>Colour guide:<br />
<table>
<tr><td></td><td>Alive</td><td>Dead</td></tr>
<tr><td>Microsoft</td><td style="background-color: #008B8B;"></td><td style="background-color: #85d3d3;">
<tr><td>Apple</td><td style="background-color: #8b008b;"></td><td style="background-color: #ae80ae;">
<tr><td>Unix-like</td><td style="background-color: #8B0000;"></td><td style="background-color: #FF8585;">
<tr><td>RSX/VMS-like</td><td style="background-color: #008000;"></td><td style="background-color: #9dd19d;">
<tr><td>DOS-like</td><td style="background-color: #0000CD;"></td><td style="background-color: #b0b0eb;">
<tr><td>AmigaOS-like</td><td style="background-color: #FF8C00;"></td><td style="background-color: #ffd198;">
<tr><td>Mainframe systems</td><td style="background-color: #8B4513;"></td><td style="background-color: #c09e86;">
<tr><td>L4 microkernel family</td><td style="background-color: #FFD700;"></td><td style="background-color: #ffe975;">
<tr><td>OSEK-compliant</td><td style="background-color: #FF00FF;"></td><td style="background-color: #ffb6ff;">
<tr><td>Others</td><td style="background-color: #000;"></td><td style="background-color: #AAA;">
</table>
<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>