NASASpaceAppsChallenge2025/web/aladin.html at fa10a62080433ba3696212255b77189f883ebd39 · ljfp/NASASpaceAppsChallenge2025 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html lang="en-US">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<title>NASA FITS Explorer</title>
		<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%230f172a'/%3E%3Cpath fill='%23facc15' d='M16 4l3.4 7 7.6.7-5.8 5.2 1.8 7.6-7-4.2-7 4.2 1.8-7.6-5.8-5.2 7.6-.7z'/%3E%3C/svg%3E" />
		<link rel="stylesheet" href="/static/styles.css" />
		<link rel="stylesheet" href="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.min.css" />
		<script src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js"></script>
	</head>
	<body>
		<div id="aladin-lite-div" aria-label="Interactive FITS viewer"></div>
		<aside class="hud" aria-live="polite">
			<p class="title">NASA FITS Explorer</p>
			<p class="status" id="status-message">Select a FITS source to start exploring.</p>
			<div class="controls">
				<label class="file-picker">
					<input id="fits-file" type="file" accept=".fits,.fit,application/fits" />
					<span>Open local FITS file</span>
				</label>
				<div class="url-loader">
					<input id="fits-url" type="url" placeholder="https://data.nasa.gov/sample.fits" aria-label="FITS file URL" />
					<button type="button" id="load-url">Load URL</button>
				</div>
				<div class="marker-actions">
					<button type="button" id="add-marker" class="marker-control">Add marker</button>
					<button type="button" id="remove-marker" class="marker-control">Remove marker</button>
					<button type="button" id="open-comparison">Compare</button>
				</div>
			</div>
			<div class="samples">
				<span class="samples-label">Try a sample dataset:</span>
				<div class="sample-buttons">
					<button
						type="button"
						data-fits-url="https://cdsarc.cds.unistra.fr/saadavizier/download?oid=864972989978905533"
						data-label="WISE Infrared — IC 434 & Horsehead Nebula"
						data-colormap="magma"
					>
						Horsehead Nebula (WISE)
					</button>
					<button
						type="button"
						data-fits-url="https://fits.gsfc.nasa.gov/samples/NGC6543.fits"
						data-label="HST WFPC2 — NGC 6543 (Cat's Eye)"
						data-colormap="viridis"
					>
						Cat's Eye Nebula (HST)
					</button>
					<button
						type="button"
						data-fits-url="https://fits.gsfc.nasa.gov/samples/FUV.fits"
						data-label="GALEX FUV — M101 Spiral"
						data-colormap="plasma"
					>
						Pinwheel Galaxy (GALEX)
					</button>
				</div>
			</div>
			<p class="notice" id="aladin-hint">
				Upload high-resolution FITS files from NASA missions or paste a link to remote data sets. Large imagery may take a moment to render.
			</p>
			<p class="notice hidden" id="aladin-error" role="alert"></p>
		</aside>
		<div id="marker-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="marker-modal-title">
			<form class="modal__content">
				<h2 id="marker-modal-title">Add marker</h2>
				<p class="modal__hint">Customize the marker details before saving it to the sky map.</p>
				<label for="marker-title">
					<span>Title</span>
					<input id="marker-title" name="marker-title" type="text" autocomplete="off" />
				</label>
				<label for="marker-description">
					<span>Description</span>
					<textarea id="marker-description" name="marker-description" rows="3"></textarea>
				</label>
				<label for="marker-color" class="modal__color-picker">
					<span>Marker color</span>
					<input id="marker-color" name="marker-color" type="color" value="#60A5FA" />
				</label>
				<div class="modal__actions">
					<button type="button" class="modal__button modal__button--secondary" data-action="cancel">Cancel</button>
					<button type="submit" class="modal__button modal__button--primary">Save marker</button>
				</div>
			</form>
		</div>
		<script src="static/front_end.js"></script>
	</body>
</html>