Spaces:
Running
Running
| <html><head><base href="temporal://royalnavy/data/history"><title>Royal Navy Temporal Data Archives</title> | |
| <style> | |
| body { | |
| font-family: 'Georgia', serif; | |
| background-color: #f0f0f0; | |
| color: #333; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #fff; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| header { | |
| background-color: #003366; | |
| color: #fff; | |
| text-align: center; | |
| padding: 20px 0; | |
| margin-bottom: 20px; | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: 2.5em; | |
| } | |
| h2 { | |
| color: #003366; | |
| border-bottom: 2px solid #003366; | |
| padding-bottom: 10px; | |
| } | |
| .timeline { | |
| position: relative; | |
| padding: 20px 0; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| width: 2px; | |
| height: 100%; | |
| background: #003366; | |
| } | |
| .event { | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| width: 45%; | |
| } | |
| .event::after { | |
| content: ''; | |
| position: absolute; | |
| top: 20px; | |
| right: -15px; | |
| width: 30px; | |
| height: 30px; | |
| background-color: #003366; | |
| border-radius: 50%; | |
| } | |
| .event:nth-child(even) { | |
| margin-left: 55%; | |
| } | |
| .event:nth-child(even)::after { | |
| left: -15px; | |
| } | |
| .year { | |
| font-weight: bold; | |
| color: #003366; | |
| margin-bottom: 10px; | |
| } | |
| #timeSelector { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| } | |
| #yearInput { | |
| padding: 10px; | |
| font-size: 16px; | |
| border: 1px solid #003366; | |
| } | |
| #jumpButton { | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| background-color: #003366; | |
| color: #fff; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| #jumpButton:hover { | |
| background-color: #004c99; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Royal Navy Temporal Data Archives</h1> | |
| </header> | |
| <div class="container"> | |
| <div id="timeSelector"> | |
| <input type="number" id="yearInput" min="1500" max="2100" value="1805" placeholder="Enter year"> | |
| <button id="jumpButton">Jump to Year</button> | |
| </div> | |
| <h2>Historical Timeline</h2> | |
| <div class="timeline" id="timeline"> | |
| <!-- Timeline events will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| <script> | |
| const timeline = document.getElementById('timeline'); | |
| const yearInput = document.getElementById('yearInput'); | |
| const jumpButton = document.getElementById('jumpButton'); | |
| const events = [ | |
| { year: 1545, event: "Mary Rose sinks in the Solent" }, | |
| { year: 1588, event: "Defeat of the Spanish Armada" }, | |
| { year: 1805, event: "Battle of Trafalgar" }, | |
| { year: 1914, event: "Beginning of World War I naval operations" }, | |
| { year: 1939, event: "Start of World War II naval engagements" }, | |
| { year: 1982, event: "Falklands War naval campaign" }, | |
| { year: 2020, event: "HMS Queen Elizabeth becomes fleet flagship" }, | |
| { year: 2050, event: "First AI-controlled naval fleet deployed" } | |
| ]; | |
| function displayEvents(centerYear) { | |
| timeline.innerHTML = ''; | |
| events.forEach(evt => { | |
| if (Math.abs(evt.year - centerYear) <= 100) { | |
| const eventEl = document.createElement('div'); | |
| eventEl.className = 'event'; | |
| eventEl.innerHTML = ` | |
| <div class="year">${evt.year}</div> | |
| <div class="description">${evt.event}</div> | |
| `; | |
| timeline.appendChild(eventEl); | |
| } | |
| }); | |
| } | |
| jumpButton.addEventListener('click', () => { | |
| const year = parseInt(yearInput.value); | |
| if (year >= 1500 && year <= 2100) { | |
| displayEvents(year); | |
| } else { | |
| alert("Please enter a year between 1500 and 2100."); | |
| } | |
| }); | |
| // Initial display centered on 1805 (Battle of Trafalgar) | |
| displayEvents(1805); | |
| </script> | |
| </body></html> |