mirror of
https://github.com/karma-riuk/crab-webapp.git
synced 2025-07-05 14:18:12 +02:00
added header to page
This commit is contained in:
Karma Riuk
@ -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 {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
max-width: 50vw;
|
max-width: 50vw;
|
||||||
margin: 2em auto;
|
margin: 2em auto;
|
||||||
}
|
}
|
||||||
@ -19,6 +49,7 @@ h1 {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
margin: 0;
|
||||||
/* space between icon and text */
|
/* space between icon and text */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -118,3 +149,43 @@ table tbody td:nth-child(1) {
|
|||||||
.results-container#comment table tbody td:nth-child(3) {
|
.results-container#comment table tbody td:nth-child(3) {
|
||||||
text-align: right;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@ -13,10 +13,14 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<header class="site-header">
|
||||||
<h1>
|
<h1>
|
||||||
<img src="/img/crab.png" alt="Crab" class="crab-icon">
|
<img src="/img/crab.png" alt="Crab" class="crab-icon">
|
||||||
Crab Webapp
|
Crab Webapp
|
||||||
</h1>
|
</h1>
|
||||||
|
<button id="info-button" class="info-btn" aria-label="About this project">About</button>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend><strong>Download a Dataset</strong></legend>
|
<legend><strong>Download a Dataset</strong></legend>
|
||||||
@ -86,6 +90,30 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="modal-overlay" class="modal-overlay hidden">
|
||||||
|
<div class="modal-container">
|
||||||
|
<button id="modal-close" class="modal-close" aria-label="Close">×</button>
|
||||||
|
<h2>About this project</h2>
|
||||||
|
<div>
|
||||||
|
<p>CRAB (Code Review Automation Benchmark) is a research-driven platform designed to evaluate deep
|
||||||
|
learning models for code review tasks. Developed as part of a master's thesis at the Università
|
||||||
|
della Svizzera italiana, CRAB provides a high-quality, curated benchmark dataset of Java code
|
||||||
|
review triplets: submitted code, reviewer comment, and revised code. Each instance is manually
|
||||||
|
validated to ensure that reviewer comments directly address code issues and that the revised
|
||||||
|
code implements the feedback accurately. </p>
|
||||||
|
|
||||||
|
<p>The platform supports two core tasks: generating human-like review comments and refining code
|
||||||
|
based on those comments. It also accounts for paraphrased feedback and alternative valid code
|
||||||
|
revisions, offering a more realistic and robust evaluation. CRAB addresses the shortcomings of
|
||||||
|
existing datasets by eliminating noise and ensuring functional correctness through testing.
|
||||||
|
Researchers can upload model predictions to receive standardized evaluations, making CRAB an
|
||||||
|
essential tool for advancing automated code review technologies.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -129,3 +129,25 @@ socket.on("successful-upload", () => {
|
|||||||
statusEl.style.color = "green";
|
statusEl.style.color = "green";
|
||||||
statusEl.textContent = "Upload succeeded!";
|
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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user