diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 00000000..b3d9f911 --- /dev/null +++ b/css/contact.css @@ -0,0 +1,32 @@ +address { + display: inline-block; +} + +.contact-element { + display: flex; + align-items: center; + margin: 5px 0; +} + +.contact-element::before { + content: "•"; + margin-right: 10px; + font-size: 1.2em; + color: black; +} + +.copy-email-button img { + display: block; +} + +.email { + margin-left: 10px; + margin-right: 10px; +} + +.copy-infobox { + position: absolute; + background-color: #f1f1f1; + padding: 5px; + border-radius: 5px; +} diff --git a/css/filter.css b/css/filter.css index 721ef365..9750bdd3 100644 --- a/css/filter.css +++ b/css/filter.css @@ -35,3 +35,14 @@ flex-direction: column; padding: 10px 0; } + +.filter-action { + padding: 5px; + border-radius: 5px; + font-weight: 500; + border: 1px solid #000; +} + +.filter-action:hover { + background-color: #c5c5c5; +} diff --git a/css/information.css b/css/information.css new file mode 100644 index 00000000..6f02a227 --- /dev/null +++ b/css/information.css @@ -0,0 +1,39 @@ +#information-icon { + position: fixed; + right: 20px; + bottom: 20px; + z-index: 1; +} + +#information-icon:hover { + cursor: pointer; +} + +#close-information:hover { + cursor: pointer; +} + +#close-information { + margin-left: auto; +} + +#information-modal { + position: fixed; + z-index: 2; + display: none; + width: 500px; + height: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + flex-direction: column; + backdrop-filter: blur(10px); + background-color: rgba(225, 225, 225, 0.8); + padding: 20px; + border-radius: 10px; + border: 2px solid black; +} + +.info-modal-content { + width: 100%; +} diff --git a/css/logo.css b/css/logo.css new file mode 100644 index 00000000..bfb2fcb1 --- /dev/null +++ b/css/logo.css @@ -0,0 +1,22 @@ +.logo-letter { + font-style: italic; + font-size: 45px; + font-family: serif; +} + +.e1 { + color: #6e84f8; +} + +.e2 { + color: #2b3fa4; +} + +.d { + color: #653668; +} + +.e3 { + color: #9e2c2c; + font-size: 50px; +} diff --git a/css/main.css b/css/main.css index 56011873..e29213f8 100644 --- a/css/main.css +++ b/css/main.css @@ -18,3 +18,15 @@ input[type="number"]::-webkit-inner-spin-button { input[type="number"] { -moz-appearance: textfield; } + +a { + text-decoration: none; + color: #2b3fa4; +} + +button { + cursor: pointer; + border: none; + background: none; + padding: 0; +} diff --git a/css/modal.css b/css/modal.css index 361c3f3b..64ad4532 100644 --- a/css/modal.css +++ b/css/modal.css @@ -77,21 +77,6 @@ div.align-right { font-family: serif; } -#logo-d { - color: #6e84f8; - font-style: italic; -} - -#logo-m { - color: #2b3fa4; - font-style: italic; -} - -#logo-x { - color: #9e2c2c; - font-size: 60px; -} - #logo-background { background-color: "#a6a6a6"; } diff --git a/favicon.ico b/favicon.ico index 7b894743..680b385f 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/img/braulio-email.webp b/img/braulio-email.webp new file mode 100644 index 00000000..6caf6a83 Binary files /dev/null and b/img/braulio-email.webp differ diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 00000000..16f11c92 --- /dev/null +++ b/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/copy.svg b/img/copy.svg new file mode 100644 index 00000000..21968799 --- /dev/null +++ b/img/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/dmx_logo.png b/img/dmx_logo.png deleted file mode 100644 index 3f89a3f6..00000000 Binary files a/img/dmx_logo.png and /dev/null differ diff --git a/img/eede-logo.svg b/img/eede-logo.svg new file mode 100644 index 00000000..aab9857d --- /dev/null +++ b/img/eede-logo.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + diff --git a/img/information.svg b/img/information.svg new file mode 100644 index 00000000..41e50b9c --- /dev/null +++ b/img/information.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/juraj-email.webp b/img/juraj-email.webp new file mode 100644 index 00000000..685b9fbc Binary files /dev/null and b/img/juraj-email.webp differ diff --git a/img/thomas-email.webp b/img/thomas-email.webp new file mode 100644 index 00000000..2221ecf4 Binary files /dev/null and b/img/thomas-email.webp differ diff --git a/index.html b/index.html index a76ce976..c9dec4db 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,14 @@ + + + @@ -20,7 +23,8 @@

Welcome to

@@ -67,8 +71,8 @@
- - + +
@@ -84,11 +88,71 @@ width="20" height="20" /> + Information + +
+ Close +
+ eedE +

Welcome to eede, an EDM4hep Event Data Explorer. Learn more about eede on the wiki. + Want to learn more about EDM4hep? Check out the EDM4hep website. +

+

+ Found a bug or have a feature request? Open a new issue. +

+

Contact:

+ +
+
+ + \ No newline at end of file diff --git a/js/information.js b/js/information.js new file mode 100644 index 00000000..d26168cc --- /dev/null +++ b/js/information.js @@ -0,0 +1,58 @@ +const infoIcon = document.getElementById("information-icon"); +const closeIcon = document.getElementById("close-information"); +const copyToClipboardButtons = + document.getElementsByClassName("copy-email-button"); + +Array.from(copyToClipboardButtons).forEach((button) => { + button.addEventListener("click", () => { + const email = button.getAttribute("data-email"); + copyEmailAddress(email) + .then(() => { + showCopyInfo(button, "Copied!"); + }) + .catch((error) => { + showCopyInfo(button, "Error!"); + console.error("Failed to copy email address: ", error); + }); + }); +}); + +function showCopyInfo(button, message) { + const copyDiv = document.createElement("div"); + copyDiv.className = "copy-infobox"; + copyDiv.appendChild(document.createTextNode(message)); + button.appendChild(copyDiv); + setTimeout(() => { + button.removeChild(copyDiv); + }, 500); +} + +function copyEmailAddress(address) { + return navigator.clipboard.writeText(address); +} + +const showModal = () => { + const modal = document.getElementById("information-modal"); + modal.style.display = "flex"; +}; + +const hideModal = () => { + const modal = document.getElementById("information-modal"); + modal.style.display = "none"; +}; + +infoIcon.addEventListener("click", showModal); +closeIcon.addEventListener("click", hideModal); + +window.addEventListener("click", (event) => { + const modal = document.getElementById("information-modal"); + + if ( + event.target !== modal && + !modal.contains(event.target) && + event.target !== infoIcon && + modal.style.display === "flex" + ) { + hideModal(); + } +}); diff --git a/js/main.js b/js/main.js index f76ce42e..56926690 100644 --- a/js/main.js +++ b/js/main.js @@ -107,6 +107,12 @@ document .getElementById("visualize-button") .addEventListener("click", (event) => { event.preventDefault(); + + if (jsonData.data === undefined) { + errorMsg("No data loaded!"); + return; + } + const eventNum = document.getElementById("event-number").value; hideInputModal();