<!-- wrap instructions + clock in one flex -->
<div class="clock-interface">
<!-- INSTRUCTIONS on the left -->
<div id="instructions-box">
<h3>How to Use the CP Time Clock</h3>
<ol>
<li>Read the prompt (“The party starts at 7 PM…”).</li>
<li>Drag the <strong>hour hand</strong> to your arrival hour.</li>
<li>Drag the <strong>minute hand</strong> to your arrival minute.</li>
<li>Click the <strong>AM/PM</strong> button.</li>
<li>Hit <strong>Calculate CP Time</strong>.</li>
<li>Check the result and consult the Temporality Key.</li>
</ol>
</div>
<div id="clock-panel">
<div id="prompt"></div>
<div id="clock-container">
<div id="hour-hand" class="hand hour-hand"></div>
<div id="minute-hand" class="hand minute-hand"></div>
<!-- copy your 12 number divs here -->
<div class="clock-number" style="top:5%; left:50%; transform:translate(-50%,-50%);">12</div>
<div class="clock-number" style="top: 5%; left: 50%; transform: translate(-50%, -50%);">12</div>
<div class="clock-number" style="top: 17%; right: 5%; transform: translate(50%, -50%);">1</div>
<div class="clock-number" style="top: 30%; right: 10%; transform: translate(50%, -50%);">2</div>
<div class="clock-number" style="top: 50%; right: 5%; transform: translate(50%, -50%);">3</div>
<div class="clock-number" style="bottom: 30%; right: 10%; transform: translate(50%, 50%);">4</div>
<div class="clock-number" style="bottom: 17%; right: 5%; transform: translate(50%, 50%);">5</div>
<div class="clock-number" style="bottom: 5%; left: 50%; transform: translate(-50%, 50%);">6</div>
<div class="clock-number" style="bottom: 17%; left: 5%; transform: translate(-50%, 50%);">7</div>
<div class="clock-number" style="bottom: 30%; left: 10%; transform: translate(-50%, 50%);">8</div>
<div class="clock-number" style="top: 50%; left: 5%; transform: translate(-50%, -50%);">9</div>
<div class="clock-number" style="top: 30%; left: 10%; transform: translate(-50%, -50%);">10</div>
<div class="clock-number" style="top: 17%; left: 5%; transform: translate(-50%, -50%);">11</div>
</div>
<button id="am-pm-toggle">AM</button>
<button id="calculate-button">Calculate CP Time</button>
<div id="result"></div>
<div id="calculation-details"></div>
<script>
let hourAngle = 0;
let minuteAngle = 0;
let isPM = false;
const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const resultDiv = document.getElementById('result');
const detailsDiv = document.getElementById('calculation-details');
const amPmToggle = document.getElementById('am-pm-toggle');
const clockContainer = document.getElementById('clock-container');
const clockCenterX = clockContainer.offsetWidth / 2;
const clockCenterY = clockContainer.offsetHeight / 2;
// Typewriter effect for prompt
const promptText = "The party starts at 7pm, What time you going?";
const promptElement = document.getElementById('prompt');
let promptIndex = 0;
function typeWriter() {
if (promptIndex < promptText.length) {
promptElement.innerHTML += promptText.charAt(promptIndex);
promptIndex++;
setTimeout(typeWriter, 50);
}
}
typeWriter();
amPmToggle.onclick = function() {
isPM = !isPM;
amPmToggle.textContent = isPM ? 'PM' : 'AM';
};
function dragElement(element, onDrag) {
element.onmousedown = function(event) {
event.preventDefault();
document.onmousemove = onDrag;
document.onmouseup = () => (document.onmousemove = null);
};
}
dragElement(hourHand, function(event) {
const rect = clockContainer.getBoundingClientRect();
const dx = event.clientX - (rect.left + clockCenterX);
const dy = event.clientY - (rect.top + clockCenterY);
hourAngle = Math.atan2(dy, dx) * (180 / Math.PI);
if (hourAngle < 0) hourAngle += 360;
hourHand.style.transform = `rotate(${hourAngle}deg)`;
});
dragElement(minuteHand, function(event) {
const rect = clockContainer.getBoundingClientRect();
const dx = event.clientX - (rect.left + clockCenterX);
const dy = event.clientY - (rect.top + clockCenterY);
minuteAngle = Math.atan2(dy, dx) * (180 / Math.PI);
if (minuteAngle < 0) minuteAngle += 360;
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
});
function calculateTimeFromAngles() {
let hours = Math.floor(hourAngle / 30) % 12;
const minutes = Math.floor(minuteAngle / 6) % 60;
if (isPM && hours !== 12) hours += 12;
if (!isPM && hours === 12) hours = 0;
return { hours, minutes };
}
function determineTemporality(timeDifference) {
if (timeDifference <= 0.5) return "Linear";
if (timeDifference <= 2) return "Cyclical";
if (timeDifference <= 4) return "Fractal";
if (timeDifference <= 6) return "Oscillatory";
if (timeDifference <= 8) return "Coiled";
return "Speculative Other";
}
function applyAdjustment(timeDifference, temporality) {
switch(temporality) {
case "Linear":
return timeDifference;
case "Cyclical":
return timeDifference * 0.75;
case "Fractal":
return Math.pow(timeDifference, 1.5);
case "Oscillatory":
return Math.abs(Math.sin(timeDifference) * 2);
case "Coiled":
return timeDifference + Math.sin(timeDifference) * 1.5;
case "Speculative Other":
return Math.pow(timeDifference, 2) + (Math.random() - 0.5) * 2;
default:
return timeDifference;
}
}
function typeCalculation(element, lines) {
element.innerHTML = '';
let lineIndex = 0;
function typeLine() {
if (lineIndex < lines.length) {
element.innerHTML += lines[lineIndex] + "\n";
lineIndex++;
setTimeout(typeLine, 1000);
}
}
typeLine();
}
document.getElementById('calculate-button').onclick = function() {
const { hours, minutes } = calculateTimeFromAngles();
const arrivalTime = hours + (minutes / 60);
const scheduledTime = 19;
let timeDifference = Math.abs(arrivalTime - scheduledTime);
const isLate = arrivalTime > scheduledTime;
const temporality = determineTemporality(timeDifference);
const adjustedTimeDifference = applyAdjustment(timeDifference, temporality);
const hoursDifference = Math.floor(adjustedTimeDifference);
const minutesDifference = Math.round((adjustedTimeDifference % 1) * 60);
resultDiv.textContent = `7 PM means ${hours % 12 || 12}:${minutes < 10 ? '0' : ''}${minutes} ${isPM ? 'PM' : 'AM'} to you.`;
const calculationSteps = [
`Scheduled Time: 7:00 PM (19:00)`,
`Your Arrival Time: ${hours % 12 || 12}:${minutes < 10 ? '0' : ''}${minutes} ${isPM ? 'PM' : 'AM'}`,
`Time Difference (before adjustment): ${Math.floor(timeDifference)} hours ${Math.round((timeDifference % 1) * 60)} minutes`,
`Temporality Detected: ${temporality}`,
`Adjusted Time Difference: ${hoursDifference ? hoursDifference + ' hours ' : ''}${minutesDifference} minutes ${isLate ? 'late' : 'early'}`
];
typeCalculation(detailsDiv, calculationSteps);
};
</script>
</body>
</html>
<div class="temporality-key">
<h3>Temporality Key</h3>
<ul>
<li><strong>Linear</strong>: ≤ 0.5 hrs — Passing as punctual. Blending into dominant clock‐time without notice. or, you're about to leave early </li>
<li><strong>Cyclical</strong>: ≤ 2 hrs — Rhythmic loops and returns.</li>
<li><strong>Fractal</strong>: ≤ 4 hrs — Nested lateness, recursive folds of memory, patterns within patterns.</li>
<li><strong>Oscillatory</strong>: ≤ 6 hrs — Temporal pulses: presence and absence swings pulses.</li>
<li><strong>Coiled</strong>: ≤ 8 hrs — Spiral time: layered, compressed narrative.</li>
<li><strong>Speculative Other</strong>: > 8 hrs — Fugitive deep‑time: Quantum Black time imagining beyond this dimension.</li>
</ul>
</div>