<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Machine</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#time-machine-form {
width: 50%;
margin: 40px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="date"], input[type="time"], input[type="number"] {
width: 100%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
button {
width: 100%;
height: 40px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
#output {
width: 50%;
margin: 40px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<h1>Time Machine</h1>
<form id="time-machine-form">
<label>Name:</label>
<input type="text" id="name" required><br><br>
<label>Target Date (YYYY-MM-DD):</label>
<input type="date" id="target-date" required><br><br>
<label>Target Time (HH:MM):</label>
<input type="time" id="target-time" required><br><br>
<label>Velocity (fraction of c):</label>
<input type="number" id="velocity" step="0.01" required><br><br>
<label>Acceleration (fraction of c/s):</label>
<input type="number" id="acceleration" step="0.01" required><br><br>
<label>Gravitational Field (fraction of Earth's):</label>
<input type="number" id="gravitational-field" step="0.01" required><br><br>
<button id="activate-btn">Activate Time Machine</button>
</form>
<div id="output"></div>
<script>
class TimeMachine {
activate(name, targetDate, targetTime, velocity, acceleration, gravitationalField) {
console.log(`${name}, initializing time coordinates for ${targetDate} ${targetTime}`);
let now = new Date();
let currentYear = now.getFullYear();
let currentMonth = now.getMonth() + 1;
let currentDay = now.getDate();
let currentHour = now.getHours();
let currentMin = now.getMinutes();
let targetYear = parseInt(targetDate.substring(0, 4));
let targetMonth = parseInt(targetDate.substring(5, 7));
let targetDay = parseInt(targetDate.substring(8, 10));
let targetHour = parseInt(targetTime.substring(0, 2));
let targetMin = parseInt(targetTime.substring(3, 5));
let timeDifference = (targetYear - currentYear) * 365 * 24 * 60 + (targetMonth - currentMonth) * 30 * 24 * 60 + (targetDay - currentDay) * 24 * 60 + (targetHour - currentHour) * 60 + (targetMin - currentMin);
let gamma = 1 / Math.sqrt(1 - (velocity * velocity));
let observedTime = gamma * timeDifference;
let accelerationTime = velocity / acceleration;
let observedAccelerationTime = gamma * accelerationTime;
let gravitationalTimeDilation = 1 - (2 * gravitationalField / (3 * 299792458 * 299792458)) * timeDifference;
let observedGravitationalTime = observedTime * gravitationalTimeDilation;
console.log("Time machine activated. Initiating time jump...");
console.log("Time travel details:");
console.log(`Observed Time: ${observedTime} units`);
console.log(`Observed Acceleration Time: ${observedAccelerationTime}`);
console.log(`Observed Gravitational Time: ${observedGravitationalTime} units`);
document.getElementById("output").innerHTML = `
<h2>Time Travel Details</h2>
<p>Observed Time: ${observedTime} units</p>
<p>Observed Acceleration Time: ${observedAccelerationTime} units</p>
<p>Observed Gravitational Time: ${observedGravitationalTime} units</p>
`;
}
}
document.getElementById("activate-btn").addEventListener("click", function() {
let name = document.getElementById("name").value;
let targetDate = document.getElementById("target-date").value;
let targetTime = document.getElementById("target-time").val
