source ⟩ hypertext ⟩ public ⟩ sandbox ⟩ orrery ⟩ en.pug

//- meta
	slug: "sandbox/orrery"
	lang: en
	title: Sandbox page
	pageCreated: "1977-02-18"

extends ../../views/layout.pug

append presets
	- hasComments = false
	- hasSidenotes = false

append head
	script(type="module", src="/sandbox/orrery.js")
	style.
		:root {
			--background: white;
			--text: black;
			--accent: black;
		}

		.sr-only,
		#orr-date-input {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: 0;
			white-space: nowrap;
		}

		.sr-only:not(#orr-date-input) {
			position: absolute;
		}

block body
	nav#orrery-toolbar(aria-label="Orrery time and view controls")
		div#orrery-toolbar-inner

			//- Date display (mobile layer 1)
			section.oor-strip.oor-strip--date
				h2#orr-date-heading.sr-only Simulation date
				button#orr-date-button(
					type="button"
					aria-describedby="orr-date-heading"
				)
					span(aria-hidden="true")
						time#orr-date-display(datetime="2026-06-30") 2026 JUN 30
					span.sr-only Change date
				input#orr-date-input(
					type="date"
					value="2026-06-30"
					aria-label="Simulation date"
				)

			//- Date controls (mobile layer 2)
			section.oor-strip.oor-strip--steps
				fieldset#orr-date-steps(aria-label="Adjust date")
					div.oor-step-row
						button(
							type="button"
							data-step="-3652.5"
							aria-label="Decrease by ten years"
						) −10y
						button(
							type="button"
							data-step="-365.25"
							aria-label="Decrease by one year"
						) −1y
						button(
							type="button"
							data-step="-30"
							aria-label="Decrease by thirty days"
						) −30d
						button(
							type="button"
							data-step="-1"
							aria-label="Decrease by one day"
						) −1d
					div.oor-step-row
						button(
							type="button"
							data-step="+1"
							aria-label="Increase by one day"
						) +1d
						button(
							type="button"
							data-step="+30"
							aria-label="Increase by thirty days"
						) +30d
						button(
							type="button"
							data-step="+365.25"
							aria-label="Increase by one year"
						) +1y
						button(
							type="button"
							data-step="+3652.5"
							aria-label="Increase by ten years"
						) +10y

			//- Panel toggles (mobile layer 3)
			section.oor-strip.oor-strip--panels
				div.oor-button-group(role="group" aria-label="Open panels")
					button#oor-settings-open(
						type="button"
						aria-expanded="false"
						aria-controls="orrery-settings-panel"
					)
						svg(viewBox="0 0 24 24" aria-hidden="true")
							path(
								d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z " +
								   "M12 1v4M1 12h4m14 0h4M12 19v4m-7.8-2.2l2.8 2.8m8.5-8.5l2.8 2.8"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
							)
						span Settings
					button#oor-layers-open(
						type="button"
						aria-expanded="false"
						aria-controls="orrery-layers-panel"
					)
						svg(viewBox="0 0 24 24" aria-hidden="true")
							path(
								d="M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm9-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
								fill="currentColor"
							)
						span Objects
					button#oor-mission-open(
						type="button"
						aria-expanded="false"
						aria-controls="orrery-mission-panel"
					)
						svg(viewBox="0 0 24 24" aria-hidden="true")
							path(
								d="M12 2s3 5 3 11v3H9v-3c0-6 3-11 3-11ZM12 17v4M7 21h10"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
							)
						span Mission

	button#orr-gnomon(
		type="button"
		aria-label="Reset view to north-up"
		title="Reset view to north-up"
	)
		abbr(title="North") N

	script.
		(() => {
			const dateButton = document.getElementById('orr-date-button');
			const dateInput = document.getElementById('orr-date-input');
			const dateDisplay = document.getElementById('orr-date-display');

			if (dateButton && dateInput && dateDisplay) {
				dateButton.addEventListener('click', () => dateInput.showPicker());

				dateInput.addEventListener('change', (evt) => {
					const value = evt.currentTarget.value;
					if (!value) return;

					const parsed = new Date(`${value}T12:00:00Z`);
					const year = parsed.getUTCFullYear();
					const month = parsed.toLocaleDateString('en-GB', { month: 'short' }).toUpperCase();
					const day = String(parsed.getUTCDate()).padStart(2, '0');

					dateDisplay.textContent = `${year} ${month} ${day}`;
					dateDisplay.setAttribute('datetime', value);
				});
			}
		})();