142 lines
8.4 KiB
HTML
142 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>CoBiE Time System Calendar</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>CoBiE Time System</h1>
|
||
<div class="subtitle">CosmoChron Binary Epoch Calendar</div>
|
||
</div>
|
||
|
||
<div class="current-time">
|
||
<div class="label">Current CoBiE Time</div>
|
||
<div class="cobie-time" id="cobieTime" tabindex="0">+00000000.0000</div>
|
||
<div class="regular-time" id="regularTime">Loading...</div>
|
||
<div class="regular-time" style="font-size: 0.9em; color: #888;" id="taiTime">TAI: Loading...</div>
|
||
</div>
|
||
|
||
<div class="timezone-selector">
|
||
<label for="timezone">Timezone: </label>
|
||
<select id="timezone">
|
||
<option value="UTC">UTC</option>
|
||
<option value="TAI">TAI (Atomic Time)</option>
|
||
<option value="America/New_York">Eastern Time</option>
|
||
<option value="America/Chicago">Central Time</option>
|
||
<option value="America/Denver">Mountain Time</option>
|
||
<option value="America/Los_Angeles">Pacific Time</option>
|
||
<option value="Europe/London">London</option>
|
||
<option value="Europe/Paris">Paris</option>
|
||
<option value="Asia/Tokyo">Tokyo</option>
|
||
<option value="Asia/Shanghai">Shanghai</option>
|
||
<option value="Australia/Sydney">Sydney</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="calendar-controls">
|
||
<button onclick="navigatePeriod(event, -1)">←</button>
|
||
<span id="currentPeriod">Current Period</span>
|
||
<button onclick="navigatePeriod(event, 1)">→</button>
|
||
<button onclick="goToNow()">Now</button>
|
||
</div>
|
||
|
||
<div class="calendar-view">
|
||
<div class="calendar-header" id="calendarHeader">Loading...</div>
|
||
<div class="eonstrip-grid" id="eonstripGrid"></div>
|
||
</div>
|
||
|
||
<div class="time-details">
|
||
<h3 style="text-align: center; margin-bottom: 20px; color: #00ffff;">Time Breakdown</h3>
|
||
|
||
<div class="breakdown-header" style="text-align: center; margin-bottom: 15px;">
|
||
<button id="toggleExtended" class="toggle-btn">
|
||
<span class="arrow-icon">▼</span>
|
||
<span class="btn-text">Show Cosmic Units</span>
|
||
</button>
|
||
</div>
|
||
<div id="extendedBreakdown" class="extended-section"></div>
|
||
<div id="coreBreakdown"></div>
|
||
</div>
|
||
|
||
<div class="explanations" style="margin-top: 40px; padding: 30px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1);">
|
||
<h3 style="text-align: center; margin-bottom: 20px; color: #00ffff;">Understanding CoBiE Time</h3>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h4 style="color: #ff00ff; margin-bottom: 10px;">How to Read CoBiE Timestamps</h4>
|
||
<p style="line-height: 1.6;">A CoBiE timestamp follows the format <code style="background: rgba(0, 255, 255, 0.2); padding: 2px 6px; border-radius: 3px;">XXXX.XXXX</code> where:</p>
|
||
<ul style="margin-left: 20px; line-height: 1.6;">
|
||
<li>First 4 digits (before dot): Date portion - Galactic Year, Cosmocycle, Megasequence, Eonstrip</li>
|
||
<li>Last 4 digits (after dot): Time portion - Chronon, Quantic, Xenocycle, Second</li>
|
||
<li>Each digit is a hexadecimal value (0-F)</li>
|
||
</ul>
|
||
<p style="line-height: 1.6; margin-top: 10px;">For extremely large dates, an extended format is used with additional units for Epoch of Cosmos, Celestial Era, and Universal Eon.</p>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h4 style="color: #ff00ff; margin-bottom: 10px;">Time Unit Conversions</h4>
|
||
<p style="line-height: 1.6;">Each CoBiE unit is exactly 16 (0x10):</p>
|
||
<ul style="margin-left: 20px; line-height: 1.6;">
|
||
<li><strong>Xenocycle (xnc / zɛn /):</strong> 16 seconds (like a brief moment)</li>
|
||
<li><strong>Quantic (qnt / kwɑn /):</strong> 256 seconds (≈ 4.3 minutes)</li>
|
||
<li><strong>Chronon (chr / krɔn /):</strong> 4 096 seconds (≈ 1.1 hours)</li>
|
||
<li><strong>Eonstrip (eon / iˈɒn /):</strong> 65 536 seconds (≈ 18.2 hours – similar to a day)</li>
|
||
<li><strong>Megasequence (mqs / ˈmɛɡə /):</strong> 1 048 576 seconds (≈ 12.1 days – like a fortnight)</li>
|
||
<li><strong>Cosmocycle (ccy / ˈkɒzmoʊ /):</strong> 16 777 216 seconds (≈ 194 days – half a year)</li>
|
||
<li><strong>Galactic Year (gyr / ˈɡæl.jɑr /):</strong> 268 435 456 seconds (≈ 8.5 years – just under a decade)</li>
|
||
<li><strong>Universal Eon (ueo / juˈiɒn /):</strong> 4 294 967 296 seconds (≈ 136 years – roughly the span from 1889 to 2025)</li>
|
||
<li><strong>Celestial Era (cer / ˈsi.rə /):</strong> 68 719 476 736 seconds (≈ 2 179 years – from around 1 CE to about 2180 CE)</li>
|
||
<li><strong>Epoch of Cosmos (eoc / i.oʊˈsi /):</strong> 1 099 511 627 776 seconds (≈ 34 865 years – roughly since the end of the last glacial period)</li>
|
||
<li><strong>Cosmic Aeon (cae / ˈkeɪ.ɒn /):</strong> 17 592 186 044 416 seconds (≈ 557 844 years – about twice the time Homo sapiens have existed)</li>
|
||
<li><strong>Metaepoch (mep / mɛt /):</strong> 281 474 976 710 656 seconds (≈ 8 925 512 years – roughly since early hominin ancestors diverged in the Miocene)</li>
|
||
<li><strong>Eternum (etn / ˈɛt.nəm /):</strong> 4 503 599 627 370 496 seconds (≈ 142 808 207 years – around the late Jurassic period when many dinosaurs roamed)</li>
|
||
<li><strong>Infinitum (inf / ɪnˈfɪn /):</strong> 72 057 594 037 927 936 seconds (≈ 2 284 931 317 years – since the Great Oxidation Event over 2 billion years ago)</li>
|
||
<li><strong>Astralmillennia (ami / æstˈmɪl /):</strong> 1 152 921 504 606 846 976 seconds (≈ 36 558 901 084 years – more than twice the age of the universe)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h4 style="color: #ff00ff; margin-bottom: 10px;">Mythological Names</h4>
|
||
<p style="line-height: 1.6;">Each period has a celestial or mythological name:</p>
|
||
<ul style="margin-left: 20px; line-height: 1.6;">
|
||
<li><strong>Eonstrips (0-F):</strong> Named after celestial elements (Solprime, Lunex, Terros...)</li>
|
||
<li><strong>Megasequences (0-F):</strong> Named after cosmic phenomena (Azurean Tide, Sable Gleam...)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h4 style="color: #ff00ff; margin-bottom: 10px;">TAI vs UTC</h4>
|
||
<p style="line-height: 1.6;">CoBiE uses TAI (International Atomic Time) which:</p>
|
||
<ul style="margin-left: 20px; line-height: 1.6;">
|
||
<li>Runs continuously without leap seconds</li>
|
||
<li>Is currently 37 seconds ahead of UTC (as of 2025)</li>
|
||
<li>Started at the same moment as UTC on January 1, 1958</li>
|
||
<li>Provides a stable, monotonic time reference for astronomical calculations</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h4 style="color: #ff00ff; margin-bottom: 10px;">Navigation Tips</h4>
|
||
<ul style="margin-left: 20px; line-height: 1.6;">
|
||
<li>Use Previous/Next buttons to browse different megasequences</li>
|
||
<li>Click on any eonstrip card to see its full details</li>
|
||
<li>The current eonstrip is highlighted in cyan</li>
|
||
<li>All times adjust automatically to your selected timezone</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 style="color: #ff00ff; margin-bottom: 10px;">CoBiE Epoch & Time Scale</h4>
|
||
<p style="line-height: 1.6;">The CoBiE system uses the Unix TAI epoch as its starting point - January 1, 1970, 00:00:00 TAI (Atomic Time). This is when all CoBiE values were 0000.0000.</p>
|
||
<p style="line-height: 1.6;"><strong>Important:</strong> CoBiE uses TAI time scale, which differs from UTC by leap seconds. As of 2025, TAI is 37 seconds ahead of UTC. This means CoBiE time runs continuously without leap second adjustments.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|