-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
80 lines (64 loc) · 3.47 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ENJC0Q5525"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-ENJC0Q5525');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HR-diagram - interactive - Paul Belfrage</title>
<meta name="description"
content="This project is a HR-diagram of stars using D3.js. It allows users to interactively explore various properties of stars such as temperature, luminosity, radius, and more. Users can hover over individual stars to see detailed information and can also adjust the size of the stars using a dropdown menu.">
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script> -->
<script defer src="modal.js"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- <div id="hr-diagram-container"></div> -->
<nav>
<button class="btn-contact open-button">About Me / Contact </button>
<a href="https://astronomysafari.netlify.app/" target="_blank">Astronomy Safari</a>
</nav>
<dialog class="modal" id="modal">
<button class="button close-button">X</button>
<div class="modal-content">
<p>This project is a HR-diagram of stars using D3.js. It allows users to interactively explore various
properties of stars such as temperature, luminosity, radius, and more. Users can hover over individual
stars to see detailed information and can also adjust the size of the stars using a dropdown menu. For
more information on HR diagrams, you can visit the following site: <a
href="https://en.wikipedia.org/wiki/Hertzsprung%E2%80%93Russell_diagram" target="_blank">HR Diagram
- Wikipedia</a>
</p>
See the project on <a href="https://github.com/paubel/HR-diagram" target="_blank">GitHub</a>
<p>If you want to contact me, please fill in this form</p>
<form class="contact-form" target="_blank" action="https://formsubmit.co/fc585dbcd8ea518bfccc9c4030074c61"
method="POST">
<input type="text" name="name" class="form-control" placeholder="Full Name" required>
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
<textarea class="contact-textarea" placeholder="Your Message" name="message" rows="10"
required></textarea>
<button class="contact-button" type="submit">Submit
Form</button>
</form>
</div>
</dialog>
<div class="container">
<label for="dropdown">Select property</label>
<select id="dropdown"></select>
<!-- <label for="star-name-toggle" class="star-name-toggle"> Toggle Star Names</label>
<input type="checkbox" id="star-name-toggle" checked> -->
<label class="switch">Star name<input type="checkbox" id="star-name-toggle" checked>
<span class="slider round"></span>
</label>
</div>
<svg id="hr-diagram"></svg>
<script src="script.js"></script>
</body>
<!-- https://codeshack.io/json-sorter/ -->
</html>