From 2e4382617fee3f1f9b6564ddb39f4cb90405c62e Mon Sep 17 00:00:00 2001 From: Karma Riuk Date: Wed, 14 May 2025 22:56:42 +0200 Subject: [PATCH] added header to page --- public/css/style.css | 71 +++++++++++++++++++ public/index.html | 158 +++++++++++++++++++++++++------------------ public/js/index.js | 22 ++++++ 3 files changed, 186 insertions(+), 65 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 2fc76b2..cf2741f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,5 +1,35 @@ +/* Header styling */ +.site-header { + position: sticky; + display: flex; + align-items: center; + justify-content: space-between; + top: 0; + width: 100vw; + max-width: 100vw; + z-index: 1000; + background: #fafafa; + border-bottom: 1px solid #ddd; + padding: 0 1em; +} + +.info-btn { + background: none; + border: none; + font-size: 1.5rem; +} + +button { + cursor: pointer; +} + body { font-family: sans-serif; + margin: 0; + padding: 0; +} + +main { max-width: 50vw; margin: 2em auto; } @@ -19,6 +49,7 @@ h1 { display: flex; align-items: center; gap: 0.5rem; + margin: 0; /* space between icon and text */ } @@ -118,3 +149,43 @@ table tbody td:nth-child(1) { .results-container#comment table tbody td:nth-child(3) { text-align: right; } + +.hidden { + display: none !important; +} + +/* Full-screen translucent backdrop */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +/* The white box */ +.modal-container { + background: #fff; + padding: 1.5rem; + border-radius: 8px; + max-width: 400px; + width: 90%; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); + position: relative; +} + +/* Close button in corner */ +.modal-close { + position: absolute; + top: 0.5rem; + right: 0.5rem; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; +} diff --git a/public/index.html b/public/index.html index f0ff2c2..6adad7b 100644 --- a/public/index.html +++ b/public/index.html @@ -13,79 +13,107 @@ -

- Crab - Crab Webapp -

+
+

+ Crab + Crab Webapp +

+ +
+
-
- Download a Dataset - - - -

- -
+
+ Download a Dataset + + + +

+ +
-
- Upload Your Answers - - -

- -

- - -
+
+ Upload Your Answers + + +

+ +

+ + +
-
-

Processing answers...

-
- - 0% +
+

Processing answers...

+
+ + 0% +
-
-
-

Results Comment Generation

- - - - - - - - - - -
idProposed commentMax bleu score
-
+
+

Results Comment Generation

+ + + + + + + + + + +
idProposed commentMax bleu score
+
-
-

Results Code Refinement

- - - - - - - - - - -
idCompiledTested
-
+
+

Results Code Refinement

+ + + + + + + + + + +
idCompiledTested
+
+ + +
diff --git a/public/js/index.js b/public/js/index.js index 823596d..a15f25f 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -129,3 +129,25 @@ socket.on("successful-upload", () => { statusEl.style.color = "green"; statusEl.textContent = "Upload succeeded!"; }); + +// INFO-MODAL LOGIC +const infoButton = document.getElementById("info-button"); +const modalOverlay = document.getElementById("modal-overlay"); +const modalClose = document.getElementById("modal-close"); + +// open modal +infoButton.addEventListener("click", () => { + modalOverlay.classList.remove("hidden"); +}); + +// close modal via “×” button +modalClose.addEventListener("click", () => { + modalOverlay.classList.add("hidden"); +}); + +// also close if you click outside the white box +modalOverlay.addEventListener("click", (e) => { + if (e.target === modalOverlay) { + modalOverlay.classList.add("hidden"); + } +});